是否可以将 JSX 元素添加到对象数组中的模板字符串中？

Question

我正在尝试将 JSX 元素（如<a>, <p>和 else）添加到模板字符串中的对象数组中，该项目有一个包含该数组的 portfolio.jsx 文件，另一个名为 Projects.jsx 的文件映射了数组，以及一个 ProjectsItem.jsx，它包含所有 jsx 和道具以显示数据。

export default [
   {
    title: "Tenzies Game",
    imgUrl: "images/projects/tenziesgamepreview.png",
    description: `This is the final Capstone Project for ${theJSXelement}
    that teached me a lot about React, everything from props, state, making API calls, useEffects,
    React forms, and more!`,
    stack: [reactLogo, sassLogo],
    link: "https://fredtenziesgame.netlify.app/",
    codeLink: "https://github.com/fred-gutierrez/tenzies-game",
  }
]

如上所示，我试图将它添加到描述 object 模板字符串中，但在尝试这样做时，它会给我字符串化的 object 或 [object, Object]，它显示在 object 上。

我尝试将 const 与数组外的 JSX 元素放在一起，如下所示：

const newJSXelement = (<a href="https://scrimba.com/learn/learnreact" target="_blank">
    Learn React for free
  </a>)

export default [
   {
    title: "Tenzies Game",
    imgUrl: "images/projects/tenziesgamepreview.png",
    description: `This is the final Capstone Project for ${theJSXelement}
    taughtached me a lot about React, everything from props, state, making API calls, useEffects,
    React forms, and more!`,
    stack: [reactLogo, sassLogo],
    link: "https://fredtenziesgame.netlify.app/",
    codeLink: "https://github.com/fred-gutierrez/tenzies-game",
  }
]

我试着将它插入内联

${(<a href="https://scrimba.com/learn/learnreact" target="_blank">
    Learn React for free
  </a>)}

，它为我提供了 [object, Object] 或具有所有特定类型和详细信息的字符串化元素。

我是 React 的新手，所以我不确定这是否可行，但如果有的话，我非常感谢有人能够帮助我解决这种情况，谢谢！

为了以防万一，这个项目的 GitHub 存储库是： https://github.com/fred-gutierrez/React-Portfolio

Answer 1

可以通过为描述添加一个div来完成。 希望它可能有所帮助。

export default [
{
  title: "Tenzies Game",
  imgUrl: "images/projects/tenziesgamepreview.png",
  description: <div>This is the final Capstone Project for {theJSXelement}
  that teached me a lot about React, everything from props, state, making 
  API calls, useEffects,
  React forms, and more!</div>,
  stack: [reactLogo, sassLogo],
  link: "https://fredtenziesgame.netlify.app/",
  codeLink: "https://github.com/fred-gutierrez/tenzies-game",
}
]