在组件之外修改其道具后如何重新渲染React组件

Question

I have a React application structured like this: App.jsx with 2 components ParentComponentOne.jsx and ParentComponentTwo.jsx. ParentComponentOne.jsx has a component called ChildParentOne.jsx instantiated twice with different props. When clicking on a ChildParentOne.jsx I render the ParentComponentTwo which has inside 2 inputs with the values passed from ChildParentOne and a save button. When clicking on the save button i want to rerender the ChildParentOne component with the new values from the inputs.

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;

ParentComponentOne.jsx

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 ;

ChildParentOne.jsx

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 ;

ParentComponentTwo.jsx

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;

TLDR:

React Application
App.jsx - ParentComponentOne.jsx - ChildParentOne.jsx
        - ParentComponentTwo.js

onClick ChildParentOne -(send the props)-> ParentComponentOne -(ChildParentOne Props)-> App -(ChildParentOne Props)-> ParentComponentTwo

ParentComponentTwo sets the values recieved on state which are binded to input values. 
After I enter new values in the inputs how do i rerender the clicked ChildParentOne component with the new width and height.

Answer 1

When you change the state in your App component, it should trigger a re-rendering of your ChildParentOne automatically.

But since your are setting states, that references to the props, it doesn't get updated as you would think.

In order to get your code to work you need to implement the componentWillReceiveProps method to ParentComponentTwo

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