传递道具以响应封装在变量中的组件

Question

有人知道如何传递属性以响应封装在变量中的组件吗？

  export default function App() {
    let mycomponent = <MyComponent />;
    //Here i want to pass props to mycomponent
    return <div className="App">{mycomponent}</div>;
  }

示例：https://codesandbox.io/s/inspiring-wave-rwp7j?file=/src/App.js

Answer 1

尝试：

const props = { /* your props */ };
React.cloneElement(mycomponent, props);

示例：https://codesandbox.io/s/vibrant-cache-8pnes?file=/src/App.js

Answer 2

由于您期望在您的number道具在您的MyComponent，您可以遵循下面的代码。

 export default function App() {
    let mycomponent = <MyComponent number={6} />;
    //Here i want to pass props to mycomponent
    return <div className="App">{mycomponent}</div>;
  }

另一种方法是克隆组件，它返回新元素。

mycomponent = React.cloneElement(mycomponent, { number: 6 });

请参考这里了解有关克隆的更多信息。

Answer 3

第一种方法是直接使用并将道具传递给您的组件，在这里，我将值传递给title支柱

export default function App() {
    return <div className="App"><MyComponent title="Hello" /></div>;
  }

第二条路是这样

 export default function App() {
    let mycomponent = <MyComponent title={"Hello"} />;
    return <div className="App">{mycomponent}</div>;
  }