如何在React中使用上下文来处理2D数组？

import React from 'react';

const ArrayContext = React.createContext();

export default ArrayContext;

import React from 'react';
import ArrayContext from './Context';

const ParentComponent = () => {
  const arrayData = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ];

  return (
    <ArrayContext.Provider value={arrayData}>
      <ChildComponent />
    </ArrayContext.Provider>
  );
};

export default ParentComponent;

import React from 'react';
import ArrayContext from './Context';

const ChildComponent = () => {
  return (
    <ArrayContext.Consumer>
      {arrayData => (
        <div>
          {arrayData.map(row => (
            <div key={row.toString()}>
              {row.map(cell => (
                <span key={cell}>{cell}</span>
              ))}
            </div>
          ))}
        </div>
      )}
    </ArrayContext.Consumer>
  );
};

export default ChildComponent;