父组件改变时更新子组件
[英] update child component when parent component changes
本文介绍了父组件改变时更新子组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对 React js 有点陌生.我有两个问题.我来了
问题 1
我想在更新(重新渲染)父组件时更新(重新渲染)子组件.经过一番谷歌搜索，我发现当 props 改变并且我们调用 forceUpdate 函数时，只有父组件被更新，而不是子组件.如果我想更新子组件，我需要使用 setState 函数并在状态中设置一些东西来更新子组件.但我面临的问题是，当我在父组件中设置状态时，子组件不会更新.不调用子对象的渲染方法.有人可以告诉我我做错了什么吗?
Parent.jsx
class Application 扩展 React.Component {isBindEvents=false;componentWillMount(){让 {dispatch} = this.props;dispatch(getCompanyInfo( "abcd.com", (res) => {//这是一个动作调用this.props.user = res.data.user;this.setState({name:res.data.user.name})this.forceUpdate()}))}使成为(){return ( <div className='react-wrapper'><ABCD {...this.props}/>//这是我想在父组件更改时重新渲染的子组件<div ><div id="正文"><div><div ><div className="container-fluid">{this.props.posts}
</div>)}}导出默认连接(mapStateToProps)(应用程序)
CHILD.JSX
class ABCD extends React.Component {使成为() {让 isShowUser = this.props.user?真的: 错误的;返回 (<div>这是用户名 {isShowUser?this.props.user.name: '用户不存在'} </div>);}}导出默认连接(mapStateToProps)(ABCD)；
现在我要做的是，当应用程序组件正在安装时，我生成一个对后端服务器的 ajax 调用，当它返回时，它会更新道具并设置状态，以便该子组件也被重新渲染，但子组件组件不会重新渲染.有人可以告诉我出了什么问题.
问题 2
下一个问题与反应路由器有关，我使用反应路由器进行路由.这就是我使用路由器的方式模块.出口 = {小路: '/'，组件:应用程序，indexRoute: 需要('./abcd'),子路由:[要求('./componentTwo')，require('./componentOne'),]};
现在让我们假设我要去组件两个路由，它将呈现组件二，我在应用程序组件中生成一个ajax调用，并根据ajax调用返回的数据在应用程序组件中设置一些道具，然后我还希望组件二在应用程序中更改某些道具后立即重新渲染，有什么办法可以做到这一点
感谢任何帮助将不胜感激
解决方案
this.props.user = res.data.user;
您不能分配给道具.道具从父级传递.将用户设置为状态并将状态传递给您的子组件，如下所示:
在您的子组件中，您现在可以访问 this.props.user.然后也不需要 this.forceUpdate().
I'm kind of new to React js. I have two questions. Here I go
Question 1
I wanted to update(re-render) the child component when I update(re-render) the parent component. After some googling, I found out that when the props are changed and we call the forceUpdate function only the parent component is updated not the child component. If I wanted to update the child component I needed to needed to use setState function and set something in the state to update the child. But the problem that I'm facing is that when I set state in the parent component the child component is not updated. The render method of the child is not called. Can somebody please tell me what is it that I'm doing wrong?
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)
CHILD.JSX
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);
Now what I'm doing is that when the application component is mounting I generate an ajax call to my backend server and when it return it updates the props and I set the state so that that child component is also rerendered but the child component is not re-rendering. Can somebody please tell me what's is going wrong.
Question 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'),
]
};
Now let's suppose I'm going to component Two route which will render component Two and I generate a ajax call in application component and on the basis of the data returned by the ajax call I set some props in the application component and I also want the component Two to re-render as soon some props are changed in application is there any way to do that
Thanks any help will be appreciated
解决方案
this.props.user = res.data.user;
You can't assign to props. Props are passed from a parent. Set the user in the state and pass the state to your child component like so:
<ABCD {...this.props} user={this.state.user} />
In your child component you will now have access to this.props.user. Also the this.forceUpdate() will not be needed then.
这篇关于父组件改变时更新子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
