如何在组件外部修改其 props 后重新渲染 React 组件答案

【问题标题】：How to rerender React component after modifying its props outside of the component如何在组件外部修改其 props 后重新渲染 React 组件
【发布时间】：2017-04-26 14:02:11
【问题描述】：

我有一个结构如下的 React 应用程序：App.jsx 有 2 个组件 ParentComponentOne.jsx 和 ParentComponentTwo.jsx。 ParentComponentOne.jsx 有一个名为 ChildParentOne.jsx 的组件用不同的 props 实例化了两次。当单击 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.

【问题讨论】：

标签： javascript reactjs components

【解决方案1】：

当您更改 App 组件中的状态时，它应该会自动触发重新渲染您的 ChildParentOne。

但是由于您正在设置状态，即对道具的引用，它不会像您想象的那样更新。

为了让您的代码工作，您需要将componentWillReceiveProps 方法实现到ParentComponentTwo

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

【讨论】：