Adakah mungkin untuk menambah elemen JSX dalam rentetan templat pelbagai objek?

Question

Saya cuba menambah elemen JSX seperti <a>, <p> pada tatasusunan objek dalam rentetan templat, projek ini mempunyai fail yang dipanggil portfolio.jsx untuk memegang tatasusunan dan fail lain yang dipanggil Projects.jsx untuk memetakan tatasusunan, Terdapat juga fail ProjectsItem.jsx untuk memegang semua jsx dan prop untuk memaparkan data.

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

Seperti yang ditunjukkan di atas, saya cuba menambahkannya pada rentetan templat objek perihalan, tetapi apabila cuba melakukannya, ia sama ada mengembalikan saya objek bertali atau memaparkan [objek, Objek].

Saya cuba menggunakan const dengan elemen JSX di luar tatasusunan, seperti ini:

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

Saya cuba memasukkannya sebaris

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

, ia sama ada mengembalikan saya [objek, Objek] atau ia mengembalikan saya elemen bertali dengan semua jenis dan butiran khusus.

Saya agak baru dalam React, jadi saya tidak pasti sama ada ini boleh dilakukan, tetapi jika ada apa-apa yang salah, saya amat menghargai sesiapa yang boleh membantu saya memikirkan perkara ini, terima kasih!

Sekiranya, repositori GitHub untuk projek ini ialah: https://github.com/fred-gutierrez/React-Portfolio

Answer 1

Selesai dengan menambah div. Harap ini membantu anda.

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