如何更改道具的价值,如何设置场景, 假设this.props.contact.name的值是John, 我想把它改成约翰尼。 我该怎么做
例如 -
changeValue(){
this.props.contact.name='Johnny'
}
答案 0 :(得分:4)
您可以更改父组件中的prop
,因为它保存了prop
本身的值。这将强制重新呈现使用特定props
被更改的任何子组件。如果您想在发送componentWillReceiveProps
时拦截{{1}},可以使用lifecycle method {{1}}。
答案 1 :(得分:2)
我建议不要再更改道具值,你可以将函数传递给道具,然后更改父组件状态,这样就会改变子组件道具,如
您的父组件应
class SendData extends React.Component{
constructor(props) {
super(props);
this.state = {
images: [
'http://via.placeholder.com/350x150',
'http://via.placeholder.com/350x151'
],
currentImage: 0
};
this.fadeImage=this.fadeImage.bind(this);
}
fadeImage(e) {
e.preventDefault();
this.setState({currentImage: (this.state.currentImage + 1) % this.state.images.length})
}
render()
{
return(
<FadeImage images={this.state.images} currentImage={this.state.currentImage} fadeImage={this.fadeImage}/>
)
}
}
您的子组件应该像
class FadeImage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="image">
<CSSTransitionGroup
transitionName="example"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
<section>
<button className="button" onClick={this.props.fadeImage.bind(this)}>Click!</button>
<img src={this.props.images[this.props.currentImage]}/></section>
</CSSTransitionGroup>
</div>
);
}
}
请在此处查看工作示例Demo
答案 2 :(得分:1)
道具是不可变的,这意味着你无法改变它们! https://facebook.github.io/react/docs/components-and-props.html
如果要保存新值,请将其构建为状态并使用this.setState(...)
https://facebook.github.io/react/docs/state-and-lifecycle.html