能否在物件數組的模板字串中加入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",
}
]