如何从函数组件访问类组件中的数组？

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      arrayData: [1, 2, 3, 4, 5]
    };
  }

  render() {
    return <FunctionComponent arrayData={this.state.arrayData} />;
  }
}

function FunctionComponent(props) {
  const { arrayData } = props;
  // 访问和操作数组
  console.log(arrayData);

  return <div>Function Component</div>;
}

const ArrayContext = React.createContext();

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      arrayData: [1, 2, 3, 4, 5]
    };
  }

  render() {
    return (
      <ArrayContext.Provider value={this.state.arrayData}>
        <FunctionComponent />
      </ArrayContext.Provider>
    );
  }
}

function FunctionComponent() {
  return (
    <ArrayContext.Consumer>
      {arrayData => {
        // 访问和操作数组
        console.log(arrayData);

        return <div>Function Component</div>;
      }}
    </ArrayContext.Consumer>
  );
}

import { createStore } from 'redux';

const initialState = {
  arrayData: [1, 2, 3, 4, 5]
};

function reducer(state = initialState, action) {
  // 处理数组数据的各种操作
  return state;
}

const store = createStore(reducer);

class ClassComponent extends React.Component {
  render() {
    return <FunctionComponent />;
  }
}

import { connect } from 'react-redux';

function FunctionComponent(props) {
  const { arrayData } = props;
  // 访问和操作数组
  console.log(arrayData);

  return <div>Function Component</div>;
}

const mapStateToProps = state => {
  return {
    arrayData: state.arrayData
  };
};

export default connect(mapStateToProps)(FunctionComponent);