时间戳

首页 > 解决方案 > 如何在 ReactJS 的类基组件中以两种方式数据绑定传递数据？

javascript - 如何在 ReactJS 的类基组件中以两种方式数据绑定传递数据？

问题描述

我的问题在子组件中，我有一个通过 post 方法更新的状态，我必须在我的父组件中显示这个状态这两个组件都是类基组件

标签： javascriptreactjsaxios

解决方案

ReactJS 是一个具有单向数据绑定的库。所以不可能像Angular或VueJS这样传递数据。您应该将处理函数传递给子组件，然后在Axios回答之后更新本地组件和父组件。

这里有一点提示，类组件和功能组件之间的情况没有什么不同。注意示例代码：


class ParentComponent extends React.Component {
  state = {
    data: undefined,
  };

  handleGetData = data => {
    this.setState({
      data,
    });
  };

  render() {
    return (
      <ChildComponent onGetData={this.handleGetData} />
    );
  }
}

现在在ChildComponent内部，您可以访问处理函数：

class ChildComponent extends React.Component {
  componentDidMound() {
    const { onGetData } = this.props;

    Axios
      .get('someSampleUrl')
      .then( (data) => {
        onGetData(data); // running this update your parent state
      });
  }

  render() {
    return (
      <div />
    );
  }
}

推荐阅读