是否可以將 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",
}
]