在React的三个数组中显示元素

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      elements: ['element1', 'element2', 'element3']
    };
  }

  render() {
    return (
      <div>
        {this.state.elements.map((element, index) => (
          <div key={index}>{element}</div>
        ))}
      </div>
    );
  }
}

function ChildComponent(props) {
  return (
    <div>
      {props.elements.map((element, index) => (
        <div key={index}>{element}</div>
      ))}
    </div>
  );
}

class ParentComponent extends React.Component {
  render() {
    const elements = ['element1', 'element2', 'element3'];
    return <ChildComponent elements={elements} />;
  }
}

const ElementsContext = React.createContext();

function ChildComponent() {
  return (
    <ElementsContext.Consumer>
      {elements => (
        <div>
          {elements.map((element, index) => (
            <div key={index}>{element}</div>
          ))}
        </div>
      )}
    </ElementsContext.Consumer>
  );
}

class ParentComponent extends React.Component {
  render() {
    const elements = ['element1', 'element2', 'element3'];
    return (
      <ElementsContext.Provider value={elements}>
        <ChildComponent />
      </ElementsContext.Provider>
    );
  }
}