Javascript 在React中将JS对象中的组件作为道具传递

我从一个JS对象（从JSX）中读取并试图传递一个组件的值，但它被呈现为字符串

我尝试将组件（在

数据

的

图标

键中，见下文）放置在

{}

中，但这没有帮助，因为

数据

给出了一个错误

这是这些文件的简化版本

data.js

如下：

const data = [
 {
    title: "some title",
    desc: "some desc",
 },
 [
   {
     icon: "<TwitterIcon />",
     title: "title 1",
     desc: "desc 1",
   },
   {
     icon: "<FacebookIcon />",
     title: "title 2",
     desc: "desc 2",
   },
 ],
]

export { data }

import {TwitterIcon, FacebookIcon} from "../path/to/CustomIcons"

const AnotherComponent = ({ ...data}) => {

  return (
    {data[1].map(item => (
      <div>{item.icon}</div> // this prints string as opposed to rendering the component
      <div>{item.title}</div>
      <div>{item.desc}</div>
    ))}
  )
}

AnotherComponent.jsx

如下所示：

const data = [
 {
    title: "some title",
    desc: "some desc",
 },
 [
   {
     icon: "<TwitterIcon />",
     title: "title 1",
     desc: "desc 1",
   },
   {
     icon: "<FacebookIcon />",
     title: "title 2",
     desc: "desc 2",
   },
 ],
]

export { data }

import {TwitterIcon, FacebookIcon} from "../path/to/CustomIcons"

const AnotherComponent = ({ ...data}) => {

  return (
    {data[1].map(item => (
      <div>{item.icon}</div> // this prints string as opposed to rendering the component
      <div>{item.title}</div>
      <div>{item.desc}</div>
    ))}
  )
}

---

我认为您应该直接在对象中传递图标组件，如下所示：

const data = [
{
    title: "some title",
    desc: "some desc",
 },
 [
   {
     icon: <TwitterIcon />,
     title: "title 1",
     desc: "desc 1",
   } ...

const Homepage = () => {
  return (
    <AnotherComponent data={data} />
  )
}

const数据=[
{
标题：“一些标题”，
描述：“一些描述”，
},
[
{
图标：，
标题：“标题1”，
描述：“描述1”，
} ...

然后在index.js中，您可以执行以下操作（这样传递道具更为清晰）：

const主页=（）=>{
返回(
)
}

在另一个组件jsx中，现在您可以执行以下操作：

const AnotherComponent = ({data}) => {
  return (
    {data[1].map(item => (
      <div>{item.icon}</div>
      <div>{item.title}</div>
      <div>{item.desc}</div>
    ))}
  )
}

const AnotherComponent=（{data}）=>{
返回(
{数据[1]。映射（项=>(
{item.icon}
{item.title}
{item.desc}
))}
)
}

在您定义为的对象中：

{
图标：“”，
标题：“标题1”，
描述：“描述1”，
}

不要使用

”

它将始终返回一个字符串，而是使用

TwitterIcon

：

{
  icon: TwitterIcon,
  title: "title 1",
  desc: "desc 1",
}

最后，在你需要的地方用这种方式称呼它：

const AnotherComponent = ({ ...data}) => {

  return (
    {data[1].map(item => (
      <div><item.icon /></div> // HERE: check I'm calling item.icon as React Component
      <div>{item.title}</div>
      <div>{item.desc}</div>
    ))}
  )
}

const AnotherComponent=（{…data}）=>{
返回(
{数据[1]。映射（项=>(
//这里：检查我调用item.icon作为React组件
{item.title}
{item.desc}
))}
)
}

---

通过这种方式，您可以将图标传递到任何您想要的地方，而不仅仅是传递字符串。因此，当您需要它进行渲染时，您可以将其作为组件调用。我在工作中经常这样做。

JSX不是HTML字符串。请将数据包装在渲染周期内调用的某个函数中，并直接在对象中渲染图标：

icon:，

（如果不需要）不要控制数据，请参见，尽管这取决于用例，仅修复应用程序的设计可能会在没有自定义解决方案的情况下修复问题。Nikita没有错（在他们删除的答案中），在JSX元素上散布数组将使用所有索引作为道具，这些索引用作对象键，在组件中被分解，等等，这就是代码气味。虽然这看起来是可行的，但是

生命周期可能会混乱，因为它不是在应用程序中创建和更新的，而是在应用程序之外创建和更新的。让它正常工作的一种方法是将e

data

在一个函数中，该函数每次呈现调用组件时都会返回一个新数组。听起来更好。你可以在UseEffector上调用该函数。谢谢Hector，这很有魅力！你太棒了：）@megatower我很高兴它能帮上忙！