Ist es möglich, JSX-Elemente in eine Vorlagenzeichenfolge eines Arrays von Objekten einzufügen?

Question

Ich versuche, ein JSX-Element wie <a>, <p> zu einem Array von Objekten in einer Vorlagenzeichenfolge hinzuzufügen. Dieses Projekt verfügt über eine Datei namens portfolio.jsx zum Speichern des Arrays und eine andere Datei namens Projects.jsx zum Zuordnen des Arrays. Es gibt auch eine eine ProjectsItem.jsx-Datei, die alle JSX-Dateien und Requisiten zum Anzeigen der Daten enthält.

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",
  }
]

Wie oben gezeigt, versuche ich, es der Vorlagenzeichenfolge des Beschreibungsobjekts hinzuzufügen, aber wenn ich das versuche, erhalte ich entweder ein stringifiziertes Objekt zurück oder es wird [Objekt, Objekt] angezeigt.

Ich habe versucht, eine Konstante mit einem JSX-Element außerhalb des Arrays zu verwenden, etwa so:

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",
  }
]

Ich habe versucht, es inline einzufügen

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

, es gibt mir entweder [Objekt, Objekt] oder ein stringifiziertes Element mit allen spezifischen Typen und Details zurück.

Ich bin noch relativ neu bei React, also bin ich mir nicht sicher, ob das möglich ist, aber wenn etwas nicht stimmt, würde ich mich wirklich über jeden freuen, der mir helfen kann, das herauszufinden, danke!

Für alle Fälle lautet das GitHub-Repository für dieses Projekt: 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",
}
]