[英]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.