props的值怎么改,Props怎么设置,假设this.props.contact.name的值是John,我想改成Johnny。
我怎样才能做到这一点?
例如:
changeValue(){
this.props.contact.name='Johnny'
}
props的值怎么改,Props怎么设置,假设this.props.contact.name的值是John,我想改成Johnny。
我怎样才能做到这一点?
例如:
changeValue(){
this.props.contact.name='Johnny'
}
您将更改prop
父组件中的 ,因为它保存了prop
自身的值。这将强制重新渲染使用特定prop
更改的任何子组件。如果您想props
在发送时拦截它们,您可以使用生命周期方法 componentWillReceiveProps
。
我建议不要更改 props 值,您可以将函数传递给 props,然后更改父组件状态,这样它就会更改子组件 props,例如
你的父组件应该是
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>
);
}
}
请在此处查看工作示例演示
props是不可变的,这意味着你不能改变它们! https://facebook.github.io/react/docs/components-and-props.html
如果您想保存一个新值,请将其构建为状态并使用this.setState(...)
https://facebook.github.io/react/docs/state-and-lifecycle.html