如何在类组件和函数组件之间传递数据

// 父类组件
class ParentClassComponent extends React.Component {
  render() {
    return <ChildFunctionComponent message="Hello from class component!" />;
  }
}

// 子函数组件
function ChildFunctionComponent(props) {
  return <div>{props.message}</div>;
}

// 父函数组件
function ParentFunctionComponent() {
  return <ChildClassComponent message="Hello from function component!" />;
}

// 子类组件
class ChildClassComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

const MyContext = React.createContext();

class ProviderClassComponent extends React.Component {
  state = { message: 'Hello from context!' };

  render() {
    return (
      <MyContext.Provider value={this.state.message}>
        <ChildComponent />
      </MyContext.Provider>
    );
  }
}

function ConsumerFunctionComponent() {
  return (
    <MyContext.Consumer>
      {message => <div>{message}</div>}
    </MyContext.Consumer>
  );
}

npm install redux react-redux

import { createStore } from 'redux';

const initialState = { message: 'Hello from Redux!' };

function reducer(state = initialState, action) {
  return state;
}

const store = createStore(reducer);

import { Provider } from 'react-redux';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

import { connect } from 'react-redux';

class ConnectedClassComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

const mapStateToProps = state => ({
  message: state.message
});

export default connect(mapStateToProps)(ConnectedClassComponent);