从子组件更新父组件

Updating parent component from child component

本文关键字：组件 更新      更新时间：2023-09-26

我不能从子组件中渲染父组件-我将componentDidMount作为道具传递给子类，然后在那里调用它，并期望父组件进行渲染。调用呈现函数，但内容保持不变。怎么了?

var Parent = React.createClass({
   getInitialState: function () { return {content: 'clean'}; },
   componentDidMount: function () {
      this.setState({content: 'changed!'});
   },
   render: function () {
      return React.createElement('div', {rerender: this.componentDidMount.bind(this)}, this.state.content);
   }
});
var Child = React.createClass({
   render: function () {
      return React.createElement('div', {onClick: this.handleClick}, 'click me');
   },
   handleClick: function () {
      this.props.rerender();
   }
});
ReactDOM.render(
        React.createElement(ReactRouter.Router, {history: ReactRouter.browserHistory},
                React.createElement(ReactRouter.Route, {path: '/parent', component: Parent})
        )
, document.getElementById('content'));

componentDidMount()是组件完成渲染时调用的生命周期函数。

调用它似乎是在绕过整个重渲染过程。

你应该创建自己的函数。

   changeContent: function () {
      this.setState({content: 'changed!'});
   },

然后将changeContent()传递给rerender。

一般来说，避免传递React的生命周期方法!

为了解决所有这些问题，Facebook的家伙们提出了单向数据流模式。你的子组件不应该知道父组件的存在，而是应该改变某种状态(Flux、Redux、Reflux)。对状态的更改将触发父组件的重新呈现。

相关文章：