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

Question

我有一個這樣的React應用程序結構：App.jsx具有2個組件ParentComponentOne.jsx和ParentComponentTwo.jsx。 ParentComponentOne.jsx有一個名為ChildParentOne.jsx的組件，使用不同的屬性實例化了兩次。 當單擊ChildParentOne.jsx時，我渲染ParentComponentTwo，該組件內部有2個輸入，並帶有從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

當您更改App組件中的狀態時，它應自動觸發ChildParentOne的重新呈現。

但是由於您正在設置狀態，因此引用了道具，因此不會像您想象的那樣更新它。

為了使您的代碼正常工作，您需要對ParentComponentTwo實施componentWillReceiveProps方法2

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