当前位置：首页 > React

react中如何拿到封装组件

2026-01-25 15:44:55React

获取封装组件的几种方法

在React中，获取封装组件的引用可以通过多种方式实现，具体取决于组件类型和使用场景。

使用ref属性获取DOM元素或类组件 对于原生DOM元素或类组件，可以通过React.createRef()或回调ref来获取引用。函数组件默认不支持ref，除非使用forwardRef转发。

react中如何拿到封装组件

const MyComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>Forwarded Ref</div>;
});

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current); // 访问组件实例或DOM节点
  }

  render() {
    return <MyComponent ref={this.myRef} />;
  }
}

使用useImperativeHandle暴露特定方法 函数组件可以通过useImperativeHandle钩子向父组件暴露特定方法，而非整个实例。

react中如何拿到封装组件

const Child = React.forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));

  return <input ref={inputRef} />;
});

通过props传递回调函数 父组件可以通过props传递回调函数，子组件在特定时机调用该回调并传递数据或引用。

function Parent() {
  const handleChildRef = (ref) => {
    console.log('Child reference:', ref);
  };

  return <Child onRef={handleChildRef} />;
}

function Child({ onRef }) {
  const ref = useRef();
  useEffect(() => { onRef(ref.current) }, []);
  return <div ref={ref}>Child</div>;
}

使用Context共享引用 当需要跨多层组件传递引用时，可以使用React Context API共享ref对象。

const RefContext = React.createContext();

function Grandparent() {
  const sharedRef = useRef();
  return (
    <RefContext.Provider value={sharedRef}>
      <Parent />
    </RefContext.Provider>
  );
}

function Child() {
  const ref = useContext(RefContext);
  return <div ref={ref}>Shared Reference</div>;
}