如何改变反应中的道具价值?

时间:2017-06-13 10:53:40

标签: reactjs

如何更改道具的价值,如何设置场景, 假设this.props.contact.name的值是John, 我想把它改成约翰尼。 我该怎么做

例如 -

changeValue(){
  this.props.contact.name='Johnny'
}

3 个答案:

答案 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