能否在对象数组的模板字符串中添加JSX元素？

Question

我正在尝试将像<a>, <p>这样的JSX元素添加到模板字符串中的对象数组中，这个项目有一个名为portfolio.jsx的文件来保存数组，另一个名为Projects.jsx的文件来映射数组，还有一个ProjectsItem.jsx文件来保存所有的jsx和props来显示数据。

export default [
   {
    title: "Tenzies Game",
    imgUrl: "images/projects/tenziesgamepreview.png",
    description: `这是我的最终毕业项目，${theJSXelement}教会了我很多关于React的知识，包括props、state、API调用、useEffect、React表单等等！`,
    stack: [reactLogo, sassLogo],
    link: "https://fredtenziesgame.netlify.app/",
    codeLink: "https://github.com/fred-gutierrez/tenzies-game",
  }
]

如上所示，我正在尝试将它添加到description对象的模板字符串中，但是当尝试这样做时，它要么给我返回一个字符串化的对象，要么显示[object, Object]。

我尝试在数组外部使用一个带有JSX元素的const，像这样：

const newJSXelement = (<a href="https://scrimba.com/learn/learnreact" target="_blank">
    免费学习React
  </a>)

export default [
   {
    title: "Tenzies Game",
    imgUrl: "images/projects/tenziesgamepreview.png",
    description: `这是我的最终毕业项目，${theJSXelement}
    教会了我很多关于React的知识，包括props、state、API调用、useEffect、React表单等等！`,
    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">
    免费学习React
  </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>这是{theJSXelement}的最终毕业项目，
  它教会了我很多关于React的知识，包括props、state、进行API调用、
  useEffects、React表单等等！</div>,
  stack: [reactLogo, sassLogo],
  link: "https://fredtenziesgame.netlify.app/",
  codeLink: "https://github.com/fred-gutierrez/tenzies-game",
}
]