如何向存储在变量中的React组件传递props？

你当前代码中mycomponent存储的是已经实例化完成的React元素（即已经执行过<MyComponent />渲染的结果），针对不同场景有两种常用实现方案：

方案1：变量存储组件引用（推荐） #

如果可以调整变量定义逻辑，优先选择在变量中存储组件本身而非实例化后的元素，渲染时再传递属性即可：

export default function App() {
  // 变量存储组件引用，不要加尖括号实例化
  let MyComponentVar = MyComponent;
  // 渲染阶段正常传递所需props
  return <div className="App"><MyComponentVar tip="自定义属性" count={10} /></div>;
}

方案2：使用React.cloneElement修改已有元素属性 #

如果变量中已经是实例化后的React元素，可使用React内置的cloneElementAPI传入新属性，该方法会克隆原元素并合并新属性，不会修改原元素：

import { cloneElement } from 'react';

export default function App() {
  let mycomponent = <MyComponent />;
  // 第二个参数为要传入的props对象，*同名属性会覆盖原元素的已有值*
  let componentWithProps = cloneElement(mycomponent, { tip: "自定义属性", count: 10 });
  return <div className="App">{componentWithProps}</div>;
}

内容的提问来源于stack exchange，提问作者Ruslan Ermahgerd