Question

如果我只写{this.props.children}，第三行不能每秒更改。我需要写{React.cloneElement（this.props.children）}，为什么？

现在是父母下午1:50:27。现在是孩子下午1:50:27。是孩子下午1:28:30。

https://codepen.io/yemos/pen/jQveVx/?editors=0011

class A extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.setState({date: new Date()}), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  
  render() {
    return (
      <div>
        <h5>It is parent{this.state.date.toLocaleTimeString()}.</h5>
		{React.cloneElement(this.props.children)}
		{this.props.children}
      </div>
    );
  }
}

class B extends React.Component {
  componentWillMount(){
    console.log('componentWillMount');
  }
  render() {
    console.log('render');
    return <h5>It is child{new Date().toLocaleTimeString()}.</h5>;
  }
}
ReactDOM.render(<A><B/></A>, document.getElementById("root"));

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

）

Answer 1

cloneElement克隆并返回一个新的React元素。

但是react elements是不可变的。创建元素后，您将无法更改其子级或属性。

因为，您只是在组件B中返回了新日期，所以它不会被更新。您将需要使用状态日期并执行与组件A中相同的操作。

虽然克隆有效，但这只是因为它返回了一个新的react元素。但是props.children将返回相同的元素，并且仅在需要时更新。

{new Date().toLocaleTimeString()}仅返回静态日期。

Answer 2

由于B是A的子元素，因此重新渲染组件A不会触发render的{{1}}方法，因此不会进行新的更新刷新为component B，在您的情况下为component B。使用React.cloneElement确保为子代创建一个新元素，并因此重新评估更新后的值。

为什么我需要写cloneElement然后子组件将重新呈现

2 个答案: