ReactJS:如何从子组件访问父元素宽度？

// 父组件
import React, { createContext, useRef } from 'react';

// 创建一个Context
const ParentWidthContext = createContext();

const ParentComponent = () => {
  // 创建一个ref
  const parentRef = useRef(null);

  return (
    <div ref={parentRef}>
      {/* 将父元素的宽度作为Context的值传递给子组件 */}
      <ParentWidthContext.Provider value={parentRef.current?.clientWidth}>
        <ChildComponent />
      </ParentWidthContext.Provider>
    </div>
  );
};

// 子组件
const ChildComponent = () => {
  return (
    <ParentWidthContext.Consumer>
      {width => (
        <div>
          父元素的宽度为: {width}px
        </div>
      )}
    </ParentWidthContext.Consumer>
  );
};