如何在反应原生的子组件上重新渲染父组件?

Posted

技术标签:

【中文标题】如何在反应原生的子组件上重新渲染父组件?【英文标题】:How to re-render parent component on change on sub component in react native? 【发布时间】:2017-02-09 17:05:17 【问题描述】:

我有一个渲染另一个组件的组件。当我对子组件进行更改时,我希望重新渲染主组件。

在下面的示例中,来自第二个组件的onSubmit,在主组件上触发_onSubmit,但setState 不会重新渲染视图

想法?

class MainLayout extends Component 
  constructor(props) 
    super(props);

    this.state = 
      data: 'no',
    ;

    this._onSubmit = this._onSubmit.bind(this);
  

  // this get's triggered by _checkSubmitReady() on the second component
  _onSubmit(data) 
    // this state get's set, but this component is not re-rendered
    // i assume render() should be called here
    this.setState(data: data);
  

  render() 
    return (
      <View><SecondLayout onSubmit=this._onSubmit/>this.state.data</View>
    );
  



class SecondLayout extends Component 
  constructor(props) 
    super(props);

    this._checkSubmit = this._checkSubmit.bind(this);
  

  _checkSubmit() 
    this.props.onSubmit('yes');
  

  // sub component is mounted, call onSubmit() on parent component
  componentDidMount() 
    this._checkSubmit();
  

  render() 
    return (
      <View><Text>Nothing here</Text></View>
    );
  

【问题讨论】:

【参考方案1】:

试试:

_onSubmit(data) 
  this.setState( data: data , () => 
    this.forceUpdate();
  );

或者如果你使用的是 ES5:

_onSubmit(data) 
  this.setState( data: data , function () 
    this.forceUpdate();
  .bind(this));

【讨论】:

以上是关于如何在反应原生的子组件上重新渲染父组件?的主要内容,如果未能解决你的问题,请参考以下文章

如何在状态更改(父)reactjs时重新渲染子组件

如何在没有控制器余烬的情况下重新渲染另一个组件内的子组件

子组件不会重新渲染,但父组件会重新渲染。如何让子组件重新渲染?

如何从反应中的子组件内部更改父组件的背景颜色,盖茨比

如何在反应中限制经常重新渲染的组件

如何避免在反应功能组件中对“静态组件”进行不必要的重新渲染?