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

我有一個React應用程序，其結構如下：App.jsx，帶有2個組件ParentComponentOne.jsx和ParentComponentTwo.jsx。 ParentComponentOne.jsx有一個名爲ChildParentOne.jsx的組件，用不同的道具實例化兩次。當點擊一個ChildParentOne.jsx時，我使用ChildParentOne傳遞的值和一個保存按鈕呈現ParentComponentTwo，其中包含2個輸入。當點擊保存按鈕時，我想用來自輸入的新值重新渲染ChildParentOne組件。如何在組件之外修改其道具之後重新渲染React組件

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.

來源

2017-04-26 Gogumania

當你在你的應用程序組件改變狀態時，它會自動觸發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 
      }) 
    } 
}

來源

2017-04-26 14:59:05 dschu

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

回答

相關問題