父组件更改时更新子组件

Question

我是React js的新手。 我有两个问题。 我来啦

问题1

我想在更新（重新渲染）父组件时更新（重新渲染）子组件。 经过一番谷歌搜索，我发现当更改道具时，我们调用forceUpdate函数仅更新父组件，而不更新子组件。 如果我想更新子组件，则需要使用setState函数并在状态中设置一些内容来更新子组件。 但是我面临的问题是，当我在父组件中设置状态时，子组件不会更新。 不调用子级的render方法。 有人可以告诉我我做错了什么吗？

Parent.jsx

class Application extends React.Component {
  isBindEvents=false;



  componentWillMount(){
    let {dispatch} = this.props;

  dispatch(getCompanyInfo( "abcd.com", (res) => { // THIS IS A ACTION CALL


    this.props.user = res.data.user;       
    this.setState({name:res.data.user.name})

    this.forceUpdate()

  }))
}

 render(){


return ( <div className='react-wrapper'>
    <ABCD {...this.props} /> // THIS IS THE CHILD COMPONENT WHICH I WANT TO RE-RENDER WHEN THE PARENT COMPONENT CHANGES
    <div >

      <div id="body" >
        <div>
        <div >
          <div className="container-fluid">
            {this.props.posts}
          </div>
        </div>
        </div>
      </div>
    </div>

</div>)
  }
}

export default connect(mapStateToProps)(Application)

儿童版

class ABCD extends React.Component {



  render() {



    let isShowUser = this.props.user 
      ? true
      : false;



    return (
      <div> Here is the user name {isShowUser? this.props.user.name: 'user not present'} </div>
    );
  }
}


export default connect(mapStateToProps)(ABCD);

现在，我正在做的是，在安装应用程序组件时，我会向后端服务器生成ajax调用，并在其返回时更新道具，并设置状态，以使子组件也重新呈现，但子组件不会被渲染。重新渲染。 有人可以告诉我出什么事了吗。

问题2

The next question is related to react router I'm using react router for the routeing.This is how I'm using router 

module.exports = {
  path: '/',
  component: Application,

  indexRoute: require('./abcd'),
  childRoutes: [
    require('./componentTwo'),
    require('./componentOne'),
  ]
};

现在，假设我要转到组件2的路由，该路由将渲染组件2，然后在应用程序组件中生成ajax调用，并根据ajax调用返回的数据在应用程序组件中设置一些道具，并且我还希望组件2要在应用程序中更改一些道具后立即重新渲染，有没有办法做到这一点

谢谢任何帮助，将不胜感激

Answer 1

this.props.user = res.data.user; 

您无法分配道具。 道具是从父母那里传递的。 将用户设置为状态，然后将状态传递给您的子组件，如下所示：

<ABCD {...this.props} user={this.state.user} />

现在，在子组件中，您可以访问this.props.user 。 此外，也将不需要this.forceUpdate（）。