繁体   English   中英

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

[英]How to rerender React component after modifying its props outside of the component

我有一个这样的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.

当您更改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 
           })
    }
} 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM