您可以将道具传递给JSX参考吗？

Question

在开始我的问题之前，请允许我澄清一下-这里的问题是问题的简化，我正在为旧版项目开发一个已经很大的代码库，以便在较短的时间内为客户提供服务，数据结构比花力气要花更多的时间-我知道这不是尝试传递道具的理想方法，所以请不要仅仅链接到有关如何传递道具的教程

要点是，我有很多对象，所有对象都具有以下属性{ icon: <SomeJSXReference /> }
我基本上创建了一个可重用的抽象组件，该组件根据传入的某些道具返回icon属性。

问题是，我需要将道具之一传递给icon参考本身。 这是我写的一个粗略的伪组件，以使其更加清晰。

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

我需要做的是在stroke={color}指针内引用的JSX上附加一个toRender.icon道具

基本上产生于

• <toRender.icon stroke={color} /> （toRender作为伪指针，请注意小写）
• <SpecificIcon stroke={color} /> （等同于以上=应该返回的内容）ˆ

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

有什么办法可以做到吗，那对我来说不是吗？

Answer 1

有两种方法可以实现。

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

{ icon: <SpecificIcon /> }

您可以使用React.cloneElement：

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

1. 如果未构造组件（这是一种更好的方法，因为函数/构造函数尚未执行）

{ 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} />
      ))}
    </>
  );
};