我正在尝试将像<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
通过添加一个div来完成。希望这对你有帮助。