Попытка реализовать гиперссылки в React, блог Hygraph

Question

Следуя учебному пособию по JavaScript Mastery на YouTube: «Создайте и разверните ЛУЧШЕЕ современное приложение для блога с помощью React | GraphQL, NextJS, Tailwind CSS». Проблемы с гиперссылками, которые не отображаются в моем блоге. Я уверен, что это проблема на моей стороне, и я уверен, что она в этом файле. Я закомментировал код, который не работает должным образом:

          import React from "react";
    import moment from "moment";
    
    const PostDetail = ({ post }) => {
      const getContentFragment = (index, text, obj, type) => {
        let modifiedText = text;
    
        if (obj) {
          if (obj.bold) {
            modifiedText = <b key={index}>{text}</b>;
          }
    
          if (obj.italic) {
            modifiedText = <em key={index}>{text}</em>;
          }
    
          if (obj.underline) {
            modifiedText = <u key={index}>{text}</u>;
          }
    
          // if (obj.link) {
          //   modifiedText = <a href={index}>{text}</a>;
          // }
        }
    
        switch (type) {
          case "heading-three":
            return (
              <h3 key={index} className="text-xl font-semibold mb-4">
                {modifiedText.map((item, i) => (
                  <React.Fragment key={i}>{item}</React.Fragment>
                ))}
              </h3>
            );
          case "paragraph":
            return (
              <p key={index} className="mb-8">
                {modifiedText.map((item, i) => (
                  <React.Fragment key={i}>{item}</React.Fragment>
                ))}
              </p>
            );
          case "heading-four":
            return (
              <h4 key={index} className="text-md font-semibold mb-4">
                {modifiedText.map((item, i) => (
                  <React.Fragment key={i}>{item}</React.Fragment>
                ))}
              </h4>
            );
          case "image":
            return (
              <img
                key={index}
                alt={obj.title}
                height={obj.height}
                width={obj.width}
                src={obj.src}
              />
            );
          // case "link":
          //   return (
          //     <a href={index} className="text-md mb-4">
          //       {modifiedText.map((item, i) => (
          //         <React.Fragment key={i}>"{item}"</React.Fragment>
          //       ))}
          //     </a>
          //   );
          default:
            return modifiedText;
        }
      };
    
      return (
        <>
          <div className="bg-white shadow-lg rounded-lg lg:p-8 pb-12 mb-8">
            <div className="relative overflow-hidden shadow-md mb-6">
              <img
                src={post.featuredImage.url}
                alt=""
                className="object-top h-full w-full object-cover  shadow-lg rounded-t-lg lg:rounded-lg"
              />
            </div>
            <div className="px-4 lg:px-0">
              <div className="flex items-center mb-8 w-full">
                <div className="hidden md:flex items-center justify-center lg:mb-0 lg:w-auto mr-8 items-center">
                  <img
                    alt={post.author.name}
                    height={30}
                    width={30}
                    className="align-middle rounded-full"
                    src={post.author.photo.url}
                  />
                  <p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">
                    {post.author.name}
                  </p>
                </div>
                <div className="font-medium text-gray-700">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6 inline mr-2 text-pink-500"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                    />
                  </svg>
                  <span className="align-middle">
                    {moment(post.createdAt).format("MMM DD, YYYY")}
                  </span>
                </div>
              </div>
              <h1 className="mb-8 text-3xl font-semibold">{post.title}</h1>
              {post.content.raw.children.map((typeObj, index) => {
                const children = typeObj.children.map((item, itemindex) =>
                  getContentFragment(itemindex, item.text, item)
                );
    
                return getContentFragment(index, children, typeObj, typeObj.type);
              })}
            </div>
          </div>
        </>
      );
    };
    
    export default PostDetail;
    

Я пытался связаться с Hygraph, где мы поняли, что это проблема на моем внешнем интерфейсе. Но я не могу понять, чего я не понимаю.

Answer 1

Я следовал тому же руководству, и у меня был тот же вопрос, что и у вас! Я последовал ранее полученным вами предложениям по созданию console.log для всех переменных, которые передаются в getContentFragment. При этом я обнаружил, что мне нужно проверить, что obj.type равен «link», и если это так, то вернуть измененный текст следующим образом:

      if (obj.type == 'link') {
    modifiedText = (<a href={obj.href}>Your text here</a>);
  }

Если вы хотите, чтобы ссылка была заменена необязательным текстом ссылки из hygraph, используйте следующее:

      if (obj.type == 'link') {
    modifiedText = (<a href={obj.href}>{obj['children'][0]['text']}</a>);
  }