能否在对象数组的模板字符串中添加JSX元素?
P粉366946380
P粉366946380 2023-09-11 11:24:39
0
1
608

我正在尝试将像<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

P粉366946380
P粉366946380

全部回复(1)
P粉715304239

通过添加一个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",
}
]
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板