如何将URL添加到数组中的对象

Question

我正在尝试将代码中的一些文本转换为URL，但标记不起作用。有人能帮我一下吗？

我想要的是让我的对象中的数据成为可点击的超链接

例如，我希望代码和活动单词成为超链接

或者像这样的东西

`{ url: 'http://someurl.com', linkContents: 'this is what goes inside a link tag' }`


then just `<a href={teacher.url}>{teacher.linkContents}</a>`

已尝试使用标记

const Teachers = () => {
 let teachers = TeacherList.map((teacher) => {
return (
  <li className="teacher" key={teacher.id} >
    <img className="teacher-img" src={teacher.img_src} alt="teacher" />
    <h3>{teacher.name}</h3>

    <p>{teacher.bio}</p>
    <ul className="skills">
      <li>HTML</li>
      <li>CSS</li>
      <li>Vanilla Javascript</li>


    </ul>
  </li>

const TeacherList = [
  {
    name: "Catharsis Code Live" ,
    bio: "Angie is a web developer and teacher who is passionate about building scalable, data driven web apps, especially ones that address old problems with new tech!",
    img_src: "https://cdn1.imggmi.com/uploads/2019/4/24/898316d49dcd721476a0a6ebfd6bef9d-full.png",
    id: "teach-1"
  },
  {
    name: "NodeStradamus",
    bio: "'NodeStra' is a software engineer and philosopher trying to leave the world better than he found it. He codes for non-profits, eCommerce, and large-scale web apps.",
    img_src: "https://cdn1.imggmi.com/uploads/2019/4/24/898316d49dcd721476a0a6ebfd6bef9d-full.png",
    id: "teach-2"
  },
  {
    name: "Geo 'Lo' Cation",
    bio: "Geo is a JavaScript developer working on large-scale applications. He's also a teacher who strives to support students in removing all barriers to learning code.",
    img_src: "https://cdn1.imggmi.com/uploads/2019/4/24/898316d49dcd721476a0a6ebfd6bef9d-full.png",
    id: "teach-3"
  },
  {
    name: "Ecma Scriptnstuff",
    bio: "Ecma found her passion for computers and programming over 15 years ago. She is excited to introduce people to the wonderful world of JavaScript.",
    img_src: "https://cdn1.imggmi.com/uploads/2019/4/24/898316d49dcd721476a0a6ebfd6bef9d-full.png",
    id: "teach-4"
  },

我希望代码和活动文本是hyperLinks

Answer 1

您可以将这两个键添加到您的教师数组中，并在anchor标签中使用它，如下所示：

const TeacherList = [
  {
    name: "Catharsis Code Live" ,
    bio: "Angie is a web developer and teacher who is passionate about building scalable, data driven web apps, especially ones that address old problems with new tech!",
    img_src: "https://cdn1.imggmi.com/uploads/2019/4/24/898316d49dcd721476a0a6ebfd6bef9d-full.png",
    id: "teach-1",
    someUrl: "http://example.com"
  },
  {
    name: "NodeStradamus",
    bio: "'NodeStra' is a software engineer and philosopher trying to leave the world better than he found it. He codes for non-profits, eCommerce, and large-scale web apps.",
    img_src: "https://cdn1.imggmi.com/uploads/2019/4/24/898316d49dcd721476a0a6ebfd6bef9d-full.png",
    id: "teach-2",
    someUrl: "http://example.com"
  },
]

const Teachers = () => {
  let teachers = TeacherList.map(teacher => {
    return (
      <li className="teacher" key={teacher.id}>
        <a href={teacher.someUrl}>
          <h3>{teacher.name}</h3>
        </a>
        <img className="teacher-img" src={teacher.img_src} alt="teacher-img" />

        <p>{teacher.bio}</p>
        <ul className="skills">
          <li>HTML</li>
          <li>CSS</li>
          <li>Vanilla Javascript</li>
        </ul>
      </li>
    );
  });
  return teachers;
};

这是一个running demo

Answer 2

您可以简单地将URL放在TeachersList数组对象中，并将其与教师姓名一起呈现。

就像这样。

const TeacherList = [
  {
    name: "Catharsis Code Live",
    bio:
      "Angie is a web developer and teacher who is passionate about building scalable, data driven web apps, especially ones that address old problems with new tech!",
    img_src:
      "https://cdn1.imggmi.com/uploads/2019/4/24/898316d49dcd721476a0a6ebfd6bef9d-full.png",
    id: "teach-1",
    toUrl: "https://stackoverflow.com/users/7194437/prabu-samvel",
    urlText: "stackoverflow-prabusamvel"
  },
  {
    name: "NodeStradamus",
    bio:
      "'NodeStra' is a software engineer and philosopher trying to leave the world better than he found it. He codes for non-profits, eCommerce, and large-scale web apps.",
    img_src:
      "https://cdn1.imggmi.com/uploads/2019/4/24/898316d49dcd721476a0a6ebfd6bef9d-full.png",
    id: "teach-2",
    toUrl: "https://stackoverflow.com/users/9084093/marcin-pachole",
    urlText: "stackoverflow-marncinpachole"
  }
];

function Teachers() {
  let teachers = TeacherList.map(teacher => {
    return (
      <li className="teacher" key={teacher.id}>
        <img className="teacher-img" src={teacher.img_src} alt="teacher" />
        <h3>{teacher.name}</h3>
        <a href={teacher.toUrl}>
           <h4>{teacher.textUrl}</h4>
        </a> 
        <p>{teacher.bio}</p>
        <ul className="skills">
          <li>HTML</li>
          <li>CSS</li>
          <li>Vanilla Javascript</li>
        </ul>
      </li>
    );
  });

  return <div>{teachers}</div>;
}

这里是fiddle和工作demo