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

Question

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

Answer 1

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 />

    );

  }

}

Answer 2

React 的做法是单向的。为了获得最佳实践，您必须将状态“提升”到父组件中。

但是，如果您希望专门向上传递数据，则需要将回调作为 prop 向下传递。使用该回调函数向上传递数据：

家长：

<Parent>

   <Child callback={console.log} />

</Parent>

孩子：

const Child = (props) => {

    const { callback } = props;

    const postData = (...) => {

        ...

        callback(result);

    }

    ...

}