新手上路,React 子组件怎么同步父级的props各位有什么建议？

Question

想要初始化的时候同步一个props到自己内部，这个状态交给自己管理，然后父级更新的时候也同步props到组件内部，React中怎么实现？比如一个input组件，父级传过来value进来，这时候给input组件内部管理，用户怎么输入都不会影响父级的value。当点击确定的时候，再把这个状态告诉父级。

Answer 1

`classInputextendsComponent{
constructor(props){
super(props);
this.state={
value:''
}
this.changeHandle=this.changeHandle.bind(this);
this.submit=this.submit.bind(this);
}
changeHandle(e){
this.setState({value:e.target.value});
}
submit(e){
this.props.save(this.state.value);
}
render(){
return(
submit
)
}
staticgetDerivedStateFromProps(nextProps,preState){
if(preState.value){
returnnull;
}
return{
value:nextProps.initValue
}
}
}
classAppextendsComponent{
constructor(props){
super(props);
this.state={
value:'init'
}
this.changeHandle=this.changeHandle.bind(this);
}
changeHandle(value){
this.setState({value});
}
render(){
return(
父:{this.state.value}
)
}
}
`这样试试
                            

Answer 2

简单点，
父组件props同步到子组件，然后子组件内部做状态管理，这个你应该回了，就是把props上的值赋值给子组件的state
当父组件props方式变化的时候，需要重置子组件的，这个时候做法比较粗暴的就是，直接重新渲染子组件，重新渲染子组件的最简单的做法，就是修改子组件的key就好了
子组件值变化了，同步给到父组件，通过props传递个更新的方法到子组件就好了
需要注意的问题：2和3如果都是通过观察值的变化触发执行，就是个死循环。所以需要想办法把2和3分开执行