将数据从子组件/ React挂钩传递到父组件/React挂钩

class ParentComponent extends React.Component {
  handleData = (data) => {
    // 处理传递过来的数据
    console.log(data);
  }

  render() {
    return <ChildComponent onData={this.handleData} />;
  }
}

class ChildComponent extends React.Component {
  sendData = () => {
    const data = 'Hello from child component';
    this.props.onData(data);
  }

  render() {
    return <button onClick={this.sendData}>Send Data</button>;
  }
}

// 父组件中定义上下文
class ParentComponent extends React.Component {
  static childContextTypes = {
    data: PropTypes.string
  }

  getChildContext() {
    return {
      data: 'Hello from parent component'
    };
  }

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

// 子组件中通过上下文获取数据
class ChildComponent extends React.Component {
  static contextTypes = {
    data: PropTypes.string
  }

  render() {
    return <div>{this.context.data}</div>;
  }
}

// 定义action类型和action创建函数
const UPDATE_DATA = 'UPDATE_DATA';

const updateData = (data) => ({
  type: UPDATE_DATA,
  data
});

// 定义reducer
const reducer = (state = '', action) => {
  switch (action.type) {
    case UPDATE_DATA:
      return action.data;
    default:
      return state;
  }
};

// 创建store
const store = createStore(reducer);

// 子组件中更新数据
class ChildComponent extends React.Component {
  updateData = () => {
    const data = 'Hello from child component';
    store.dispatch(updateData(data));
  }

  render() {
    return <button onClick={this.updateData}>Update Data</button>;
  }
}

// 父组件中获取数据
class ParentComponent extends React.Component {
  componentDidMount() {
    this.unsubscribe = store.subscribe(() => {
      const data = store.getState();
      console.log(data);
    });
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

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