如何在react中访问组件外部的组件状态数据？

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [data, setData] = useState('Hello World');

  return (
    <div>
      <ChildComponent data={data} />
    </div>
  );
};

// 子组件
import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.data}</p>
    </div>
  );
};

export default ChildComponent;

// 创建一个Context对象
const MyContext = React.createContext();

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [data, setData] = useState('Hello World');

  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

// 子组件
import React from 'react';

const ChildComponent = () => {
  return (
    <MyContext.Consumer>
      {(data) => (
        <div>
          <p>{data}</p>
        </div>
      )}
    </MyContext.Consumer>
  );
};

export default ChildComponent;