如何 enable/add 将标记锚定到 ReactJS 中的字符串？

Question

下面是我写的代码，当我渲染它时，item.about 其中有 <a> 标签，无法呈现它并且正在显示 [object Object] 而不是那个 JSX。 JSON.stringify 甚至不渲染它。

export default function Team() {
  const teamList = [
    {
      id: 1,
      name: "User",
      image: user,
      designation: "User",
      about:
        "He created Zoom Church LK </a>}. Apart from shipping apps, He Writes/Produces/Performs Music.",
    },
    {
      id: 2,
      name: "User 2",
      image: user,
      designation: "User",
      about:
      `He created ${<a href="https://hanancs.github.io/ZoomChurchLK/"> Zoom Church LK </a>}. Apart from shipping apps, He Writes/Produces/Performs Music.`,
    },
  ];

  return (
    <section className="leading-relaxed max-w-screen-xl mt-12 mx-auto px-4 lg:px-8 mb-20">
      <div className="space-y-3 text-center">
        <h1 className="text-5xl text-gray-400 font-black">Meet Our Team</h1>
        <p className="text-gray-500 max-w-lg mx-auto text-lg">
          Focused. Improving. Data-driven.
        </p>
      </div>
      <div className="mt-14 gap-4 sm:grid sm:grid-cols-2 lg:grid-cols-3">
        {teamList.map((item) => (
          <div className="space-y-3 mt-5" key={item.id}>
            <div className="object-center lg:w-full rounded-lg card-zoom">
              <img
                src={item.image}
                alt={item.name}
              />
            </div>
            <h4 className="text-xl text-gray-400 font-bold">{item.name}</h4>
            <h5 className="text-lg text-gray-400 font-medium">
              {item.designation}
            </h5>
            <p className="text-gray-500">{(JSON.stringify(item.about))}</p>
          </div>
        ))}
      </div>
    </section>
   );
 }

修改我的组件以便能够添加这样的链接的最佳方法是什么？

Answer 1

   // you have to use tags without ${} when
   // you want to use them in strings
  const teamList = [
    {
      id: 1,
      name: "User",
      image: user,
      designation: "User",
      about:
        "He created <a href='https://hanancs.github.io/ZoomChurchLK'> Zoom Church LK </a>. Apart from shipping apps, He Writes/Produces/Performs Music.",
    },
    {
      id: 2,
      name: "User 2",
      image: user,
      designation: "User",
      about:
      `He created <a href='https://hanancs.github.io/ZoomChurchLK'> Zoom Church LK </a>. Apart from shipping apps, He Writes/Produces/Performs Music.`,
    },
  ];
  
  // you can use dangerouslySetInnerHTML to show 
  //html tag inside of strings.
return (
   {teamList.map((team) => (
            <div dangerouslySetInnerHTML={{ __html: team.about }} key={team.id} />
          ))}
)

Answer 2

要呈现链接，请像这样更改您的 teamList：-

const teamList = [
    {
      id: 1,
      name: "User",
      image: user,
      designation: "User",
      about: <>He created <a href="https://hanancs.github.io/ZoomChurchLK/"> Zoom Church LK </a>. Apart from shipping apps, He Writes/Produces/Performs Music.</>,
    },
    {
      id: 2,
      name: "User 2",
      image: user,
      designation: "User",
      about: <>He created <a href="https://hanancs.github.io/ZoomChurchLK/"> Zoom Church LK </a>. Apart from shipping apps, He Writes/Produces/Performs Music.</>,
    },
  ];

然后渲染成这样

<p className="text-gray-500">{item.about}</p>

如何 enable/add 将标记锚定到 ReactJS 中的字符串？

How to enable/add anchor tag to the string in ReactJS?

javascript

reactjs