reactjs - React.cloneElement 传递道具问题

Question

我正在使用 React.cloneElement 因为我想在模式上动态打开一个组件。但是由于我想在样式出现在模式中时控制样式，所以我决定使用 cloneElement。我附上了一个 CodeSand 演示，它将概括地描述我的代码。我的问题是我无法访问传递给克隆元素的道具（在CodeSand 示例中调用“测试” ）。

任何想法为什么？我在这里缺少什么？

标签： reactjs

Answer 1

发生这种情况是因为您正在使用包装组件，div并且当您映射时，Children它将在div元素上而不是在Hello组件中添加道具。

这是更新的代码：

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import Parent from "./Parent";

class App extends React.Component {
  renderSomthing() {
    return [<Hello />, <Hello />];
  }
  render() {
    return <Parent>{this.renderSomthing()}</Parent>;
  }
}

render(<App />, document.getElementById("root"));

工作沙箱：https ://codesandbox.io/s/awesome-maxwell-cwt53?file=/index.js:0-343