Est-il possible d'ajouter des éléments JSX dans une chaîne de modèle d'un tableau d'objets ?

Question

J'essaie d'ajouter un élément JSX comme <a>, <p> à un tableau d'objets dans une chaîne de modèle, ce projet a un fichier appelé portfolio.jsx pour contenir le tableau et un autre fichier appelé Projects.jsx pour mapper le tableau, il y a aussi un fichier ProjectsItem.jsx pour contenir tous les jsx et les accessoires pour afficher les données.

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

Comme indiqué ci-dessus, j'essaie de l'ajouter à la chaîne de modèle de l'objet de description, mais lorsque j'essaie de le faire, soit il me renvoie un objet chaîne, soit affiche [object, Object].

J'ai essayé d'utiliser un const avec un élément JSX en dehors du tableau, comme ceci :

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

J'ai essayé de l'insérer en ligne

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

, soit il me renvoie [object, Object], soit il me renvoie un élément stringifié avec tous les types et détails spécifiques.

Je suis relativement nouveau sur React, donc je ne sais pas si cela est possible, mais s'il y a quelque chose qui ne va pas, j'apprécierais vraiment que quiconque puisse m'aider à comprendre cela, merci !

Juste au cas où, le référentiel GitHub de ce projet est : https://github.com/fred-gutierrez/React-Portfolio

Answer 1

Fait en ajoutant un div. J'espère que cela vous aide.

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