React.js中如何创建DOM元素只读Ref及父组件只读访问子组件属性

一、父组件访问子组件的只读属性 #

1. 函数组件场景（推荐） #

用 forwardRef + useImperativeHandle 精确暴露只读属性，避免父组件拿到完整的子组件实例或DOM节点：

// 子组件
import { forwardRef, useImperativeHandle, useRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const domRef = useRef(null);

  // 仅暴露只读的样式获取方法，禁止修改权限
  useImperativeHandle(ref, () => ({
    getStyleProps: () => {
      const computedStyle = window.getComputedStyle(domRef.current);
      return {
        margin: computedStyle.margin,
        color: computedStyle.color
        // 按需添加其他需要的属性
      };
    }
  }), [domRef]);

  return <div ref={domRef} {...props}>{props.children}</div>;
});

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

const ParentComponent = () => {
  const childRef = useRef(null);

  const handleGetStyle = () => {
    const styleProps = childRef.current?.getStyleProps();
    console.log(styleProps); // 仅读取数据，无法修改子组件内部状态或DOM
  };

  return (
    <div>
      <ChildComponent ref={childRef}>子组件内容</ChildComponent>
      <button onClick={handleGetStyle}>获取子组件样式</button>
    </div>
  );
};

通过useImperativeHandle只开放获取样式的接口，父组件只能读取数据，无法直接操作子组件的DOM或内部状态。

2. 类组件场景 #

类组件中，父组件可通过Ref获取子组件实例，但子组件需仅提供只读的getter方法，避免暴露可修改属性：

// 子组件
class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.domRef = React.createRef();
  }

  // 只读的样式属性 getter
  get styleProps() {
    const computedStyle = window.getComputedStyle(this.domRef.current);
    return {
      margin: computedStyle.margin,
      color: computedStyle.color
    };
  }

  render() {
    return <div ref={this.domRef} {...this.props}>{this.props.children}</div>;
  }
}

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleGetStyle = () => {
    const styleProps = this.childRef.current?.styleProps;
    console.log(styleProps); // 仅读取，无法直接修改子组件属性
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef}>子组件内容</ChildComponent>
        <button onClick={this.handleGetStyle}>获取子组件样式</button>
      </div>
    );
  }
}

子组件的styleProps是只读getter，父组件只能读取，无法赋值修改。

二、DOM元素的只读Ref #

直接用useRef或createRef获取DOM节点后，仅通过getComputedStyle读取样式，不直接修改DOM的style属性即可实现只读：

import { useRef, useEffect } from 'react';

const DemoComponent = () => {
  const domRef = useRef(null);

  useEffect(() => {
    if (domRef.current) {
      const computedStyle = window.getComputedStyle(domRef.current);
      // 仅读取属性，不执行修改操作
      console.log('margin:', computedStyle.margin);
      console.log('color:', computedStyle.color);
    }
  }, []);

  return <div ref={domRef} style={{ margin: '10px', color: '#333' }}>测试元素</div>;
};

若想彻底避免意外修改，可封装自定义Hook，仅返回只读样式数据：

import { useRef, useEffect, useState } from 'react';

const useReadOnlyDomStyle = (ref, styleKeys) => {
  const [styleProps, setStyleProps] = useState({});

  useEffect(() => {
    if (!ref.current) return;

    const updateStyle = () => {
      const computedStyle = window.getComputedStyle(ref.current);
      const newProps = {};
      styleKeys.forEach(key => {
        newProps[key] = computedStyle[key];
      });
      setStyleProps(newProps);
    };

    updateStyle();
    // 可选：监听元素样式变化，实时更新数据
    const observer = new MutationObserver(updateStyle);
    observer.observe(ref.current, { attributes: true, attributeFilter: ['style'] });

    return () => observer.disconnect();
  }, [ref, styleKeys]);

  return styleProps;
};

// 使用示例
const DemoComponent = () => {
  const domRef = useRef(null);
  const { margin, color } = useReadOnlyDomStyle(domRef, ['margin', 'color']);

  return (
    <div>
      <div ref={domRef} style={{ margin: '10px', color: '#333' }}>测试元素</div>
      <p>margin: {margin}</p>
      <p>color: {color}</p>
    </div>
  );
};

该Hook仅返回指定的样式属性，完全不提供修改DOM的能力，确保只读特性。

内容的提问来源于stack exchange，提问作者nishanth_duraisamy