Javascript 在组件外部修改其道具后，如何重新引发组件反应

我有一个结构如下的React应用程序：App.jsx，有两个组件ParentComponentOne.jsx和ParentComponentTwo.jsx。ParentComponentOne.jsx有一个名为ChildParentOne.jsx的组件，使用不同的道具实例化了两次。当单击ChildParentOne.jsx时，我呈现ParentComponentTwo，它有两个内部输入，其中包含从ChildParentOne传递的值和一个保存按钮。单击save按钮时，我希望使用输入中的新值重新输入ChildParentOne组件

App.jsx

class App extends Component {
  state = {
      show:{
        pictureEdit: false
      },  
      imgProp: null
  };

  childClicked = (props) => {
    this.setState(
        prevState => ({
            show: {
              pictureEdit: !prevState.show.pictureEdit,
            },
            imgProp: props
        }))
  }

  render() {
    return (
     <div>
       <ParentComponentOne childClicked={this.childClicked} />
       {this.state.show.pictureEdit ? <ParentComponentTwo imgProp={this.state.imgProp} /> : null}
     </div>
    );
  }
}
export default App;

class ParentComponentOne extends Component {

  imagePopUp = (props) => {
    this.props.childClicked(props);
  }

  render() {
    return (
     <div>
       <ChildParentOne onBtnClick={this.imagePopUp} imgW={340} imgH={83} />
       <div>some content</div>
       <ChildParentOne onBtnClick={this.imagePopUp} imgW={30} imgH={30}  />
     </div>
    );
  }
}
export default ParentComponentOne ;

class ChildParentOne extends Component {

  clickFunction = (e) =>{
    e.preventDefault();
    e.stopPropagation();
    this.props.onBtnClick(this.props);
  }

  render() {
    return (
     <div onClick={this.clickFunction}>
       <img src='some_src' style={{width: this.props.imgW, height: this.props.imgH}}>
     </div>
    );
  }
}
export default ChildParentOne ;

class ParentComponentTwo extends Component {

  state = {
    imgH: this.props.imgProp.imgH,
    imgW: this.props.imgProp.imgW,
  }

  handleInputChange = (event) => {
   const target = event.target;
   const value = target.value;
   const name = target.name;
   this.setState({
       [name]: value
   });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    //submit logic
 }

  render() {
    return (
     <div>
       <form onSubmit={this.handleSubmit}>
         <input
           name='imgH'
           value={this.state.imgH}
           onChange={this.handleInputChange}
           type="number"
           placeholder="Image Height"
           style={{ width: '100%' }} />
         <br />
         <input
           name='imgW'
           value={this.state.imgW}
           onChange={this.handleInputChange}
           type="number"
           placeholder="Image width"
           style={{ width: '100%' }} />
         <br />
         <br />
         <button type='submit' className="btn btn-success">Save</button>
       </form>
     </div>
    );
  }
}
export default ParentComponentTwo;

---

当您更改应用程序组件中的状态时，它会自动触发您的

ChildParentOne

的重新呈现

但是，由于您正在设置引用道具的状态，因此不会像您所想的那样进行更新

为了使代码正常工作，您需要将

组件willreceiveprops

方法实现到

ParentComponentTwo

componentWillReceiveProps(nextProps) {
    if(this.props.imgProp !== nextProps.imgProp) // Check if imgProp differs...
    {
           this.setState({ 
               imgH: nextProps.imgProps.imgH, 
               imgW: nextProps.imgProps.imgW 
           })
    }
} 

componentWillReceiveProps(nextProps) {
    if(this.props.imgProp !== nextProps.imgProp) // Check if imgProp differs...
    {
           this.setState({ 
               imgH: nextProps.imgProps.imgH, 
               imgW: nextProps.imgProps.imgW 
           })
    }
}