在 React JS 中将父组件的更新状态传递给子组件答案

【问题标题】：Pass updated state of parent to child component in React JS在 React JS 中将父组件的更新状态传递给子组件
【发布时间】：2017-09-11 23:16:28
【问题描述】：

我想将父组件中address 的更新状态传递给子组件的center 属性。更具体地说，从 App 组件到 BaseMap 组件。但是，我似乎无法让它工作。一双新鲜的眼睛可以提供帮助，我们将不胜感激！

这是我的代码（我删除了 fetch 函数，它工作得很好，所以它不会打扰你。我只需要更新我的子组件的状态）：

家长：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      avatar: '',
      username: 'nickname93',
      realName: '',
      location: '',
      followers: '',
      following: '',
      repos: '',
      address: ''
      }
  }

  render() {
    return (
      <div>
        <SearchBox fetchUser={this.fetchUser.bind(this)}/>
        <Card data={this.state} />
        <BaseMap center={this.state.address}/>
      </div>
    );
  }

  fetchApi(url) {
    // some fetch functionality
  }

  fetchUser(username) {
    let url = `https://api.github.com/users/${username}`;

    this.fetchApi(url);
  }

  componentDidMount() {
    let url = `https://api.github.com/users/${this.state.username}`;

    this.fetchApi(url);
  }

}

还有子组件：

export default class BaseMap extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            center: [24, 56],
            zoom: 11
        }
    }

    render() {
        return (
            <Col md={10} mdPull={1}>
                <div className="map">
                    <GoogleMap
                    bootstrapURLKeys={'AIzaSyBhzwgQ3EfoIRYT70fbjrWASQVwO63MKu4'}
                    center={this.state.center}
                    zoom={this.props.zoom}>
                    </GoogleMap>
                </div>
            </Col>
        );
    }
}

【问题讨论】：

标签： reactjs

【解决方案1】：

您的值正在从父组件App 传递到您的子组件BaseMap。

您可以使用this.props.center 而不是this.state.center，简单地访问或使用从父组件传递给子组件的属性（也称为props）。

export default class BaseMap extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        center: [24, 56],
        zoom: 11
    }
}

render() {
    return (
        <Col md={10} mdPull={1}>
            <div className="map">
                <GoogleMap
                bootstrapURLKeys={'AIzaSyBhzwgQ3EfoIRYT70fbjrWASQVwO63MKu4'}

                center={this.state.center} // this is [24,56]

                centerFromParentComponent = {this.props.center} // this is the property passed from parent component

                zoom={this.props.zoom}>
                </GoogleMap>
            </div>
        </Col>
    );
}

}

使用this.props，您可以访问您从父组件传递的任何属性（例如状态、变量或方法）。

您可能还想看看componentWillReceiveProps() 方法。您可能很快就会需要它。

【讨论】：

【解决方案2】：

如果您希望 BaseMap 从父 App 接收状态更新，请使用 this.props.center 而不是 this.state.center。看来您想为 center 属性设置默认值。这里是the doc 声明一个默认属性。

【讨论】：