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

Question

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

Answer 1

ReactJS 是一个具有单向数据绑定的库。所以像Angular或VueJS这样的数据是不可能传递的。您应该将处理程序函数传递给子组件，然后在Axios回答更新本地组件和父组件之后。并且这里有个小提示，类组件和函数组件对你的情况没有区别。注意示例代码：class ParentComponent extends React.Component {&nbsp; state = {&nbsp; &nbsp; data: undefined,&nbsp; };&nbsp; handleGetData = data => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; data,&nbsp; &nbsp; });&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <ChildComponent onGetData={this.handleGetData} />&nbsp; &nbsp; );&nbsp; }}现在在ChildComponent中，您可以访问处理函数：class ChildComponent extends React.Component {&nbsp; componentDidMound() {&nbsp; &nbsp; const { onGetData } = this.props;&nbsp; &nbsp; Axios&nbsp; &nbsp; &nbsp; .get('someSampleUrl')&nbsp; &nbsp; &nbsp; .then( (data) => {&nbsp; &nbsp; &nbsp; &nbsp; onGetData(data); // running this update your parent state&nbsp; &nbsp; &nbsp; });&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div />&nbsp; &nbsp; );&nbsp; }}

Answer 2

React 的做法是单向的。为了获得最佳实践，您必须将状态“提升”到父组件中。但是，如果您希望专门向上传递数据，则需要将回调作为 prop 向下传递。使用该回调函数向上传递数据：家长：<Parent>&nbsp; &nbsp;<Child callback={console.log} /></Parent>孩子：const Child = (props) => {&nbsp; &nbsp; const { callback } = props;&nbsp; &nbsp; const postData = (...) => {&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; callback(result);&nbsp; &nbsp; }&nbsp; &nbsp; ...}