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

Question

在我开始我的问题之前，请允许我澄清一下 - 这里的问题是对问题的简化，我正在为一个客户在很短的时间内为一个遗留项目开发一个已经很大的代码库，然后重新构建数据比试图弄清楚这一点需要更多的时间 - 我知道这不是尝试传递道具的理想方式，所以请不要只链接到有关如何传递道具的教程

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

问题是，我需要将其中一个道具传递给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} /> （渲染为伪指针，注意小写）
• <SpecificIcon stroke={color} /> （相当于上面的=应该返回的）^

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

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

Answer 1

有两种方法可以做到。

1. 如果组件已经构造（构造的含义参见JSX in Depth）：

{ icon: <SpecificIcon /> }

你可以使用React.cloneElement:

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

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

{ icon: SpecificIcon }

你可以在传递props的时候渲染它：

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