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

从函数组件访问类组件中的数组可以通过以下几种方式实现：

通过props传递：在类组件中将数组作为props传递给函数组件。在函数组件中通过props参数接收数组，并进行访问和操作。

示例代码：

在类组件中：

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>;
}

使用Context API：通过创建一个Context，在类组件中将数组作为Context的值，然后在函数组件中使用Context.Provider包裹，并通过Context.Consumer访问数组。

示例代码：

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>
  );
}

使用React Redux：通过在类组件中使用Redux管理数组数据，并在函数组件中使用connect函数连接Redux store，从而访问和操作数组。

示例代码：

在类组件中：

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);

以上是三种常见的从函数组件访问类组件中的数组的方法。根据具体场景和需求，选择适合的方式进行数据传递和访问。