コンポーネントの外でその小道具を変更した後にReactコンポーネントを再レンダリングする方法

Question

Reactアプリケーションは次のように構造化されています.App.jsxに2つのコンポーネントParentComponentOne.jsxとParentComponentTwo.jsxがあります。 ParentComponentOne.jsxには、ChildParentOne.jsxというコンポーネントが、異なる小道具で2回インスタンス化されています。 ChildParentOne.jsxをクリックすると、2つの入力を持つParentComponentTwoがChildParentOneから渡された値と保存ボタンでレンダリングされます。保存ボタンをクリックすると、入力からの新しい値で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; 

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

アプリのコンポーネントの状態を変更すると、それは自動的にあなたのChildParentOneの再描画をトリガする必要があります。

あなたが設定している状態であるので、それは小道具に言及しているので、思った通りに更新されません。

あなたはParentComponentTwo

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

に componentWillReceivePropsメソッドを実装する必要が動作するようにあなたのコードを取得するために