如何在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 的做法是單向的。 為了獲得最佳實踐，您必須將狀態“提升”到父組件中。

但是，如果您專門尋找向上傳遞數據，則需要將回調作為道具向下傳遞。 使用該回調函數向上傳遞數據：

家長：

<Parent>
   <Child callback={console.log} />
</Parent>

孩子：

const Child = (props) => {
    const { callback } = props;
    const postData = (...) => {
        ...
        callback(result);
    }
    ...
}