你可以将 props 传递给 JSX 引用吗？

Question

在开始我的问题之前，请允许我澄清一下 - 这里的问题是问题的简化，我正在为一个客户的遗留项目开发一个已经很大的代码库时间跨度和重新构建数据比尝试解决这个问题要花费我更多的时间 - 我知道这不是尝试传递道具的理想方式，所以请不要只是 link 教程如何传递道具

要点是，我有一大堆对象，所有对象都有以下内容属性 { icon: <SomeJSXReference /> }
我基本上创建了一个可重复使用的抽象组件，该组件 returns 图标属性基于某些传递给它的道具。

问题是，我需要将其中一个道具传递给 icon 引用本身。这是我写的一个粗略的伪组件，让它更清晰一些。

const objectsArray = [{ icon: <SpecificIcon /> }, /*...*/]
const Simplified = (props: { color: string }) => {
  const { color } = props
  const toRender = objectsArray.someOperationsLeadingToFinalObjectReference()
  return toRender.icon
}

我需要做的是以某种方式将 stroke={color} 道具附加到 toRender.icon 指针内引用的 JSX

结果基本上是

<toRender.icon stroke={color} /> (toRender为伪指针，注意小写)
<SpecificIcon stroke={color} /> （等价于上面=应该返回什么）^

注意：这不一定是 <SpecificIcon />，而是 JSX.Element toRender.icon 指向

的任何内容

有什么方法可以做到这一点，我没有想到吗？

Answer 1

有两种方法可以做到。

如果组件已经构建（关于构建的含义，请参阅JSX in Depth）：

{ icon: <SpecificIcon /> }

您可以使用 React.cloneElement:

[<Counter />].map(Component => React.cloneElement(Component, { num: 5 }))

如果组件未构建（这是 更好的方法，因为 function/constructor 尚未执行）：

{ icon: SpecificIcon }

你可以边传边渲染它：

[Counter].map((Component, index) => <Component key={index} num={2} />)

查看完整示例：

const Counter = ({ num = 0 }) => <div>{num}</div>;

const App = () => {
  return (
    <>
      <Counter />
      {[<Counter />].map(Component =>
        React.cloneElement(Component, { num: 4 })
      )}
      {[Counter].map((Component, index) => (
        <Counter key={index} num={2} />
      ))}
    </>
  );
};

你可以将 props 传递给 JSX 引用吗？

Can you pass props to a JSX reference?

javascript

jsx

reactjs

react-props