如何使用React，透传各类组件能力/属性？

在23年的时候，我主要使用的框架还是Vue，当时写了一篇“如何二次封装一个Vue3组件库？”的文章，里面涉及了一些如何使用Vue透传组件能力的方法。在我24年接触React之后，我发现这种扩展组件能力的方式有一个专门的术语：高阶组件（HOC）。但在Vue开发中，这个词很少听到。

这篇文章中会描述使用React透传组件各类能力的方式。这些透传方式经常在高阶组件中使用，但并不只有高阶组件会用到它们。React有类式组件和函数式组件两种，我们会分别介绍。

问题描述

首先我们列举下简单的场景，说明我们为什么需要透传组件能力。这里以函数式组件为例。

// 问题示例，这段代码是不正确的
import { useRef } from "react";function FunComp() {return <input />;
}function FunComp2() {return <div><input /></div>;
}function App() {const refFun = useRef(null);const handleClick = () => {console.log("click");};const handleClickFocus = () => {if (refFun.current) refFun.current?.focus();};return (<div><FunCompref={refFun}style={{ background: "red" }}onClick={handleClick}/><div onClick={handleClickFocus}>点我聚焦</div></div>);
}

假设我们想创建一个自定义组件（FunComp），里面封装了另外一个组件（例如这里的input），希望使用这个自定义组件增强原组件的能力，或者预先设定一些样式等等，自定义组件可能直接返回该组件，也可能被处理过（例如FunComp2被div包裹）。

虽然原组件被封装了，但是还希望原组件的能力直接被透传给自定义组件。例如我们在自定义组件上操作props, 事件，ref等，希望就像操作原组件一样。在Vue3中，很多能力可以直接使用Attributes继承特性，但是React却没有，需要我们自己实现。

函数式组件-透传Props和事件

在函数式组件中，prop实际上就是组件的入参，且所有prop是被包含在同一个参数中的，因此很容易透传给子组件。且事件本身实际上也是prop，可以一并透传。

function FunComp(props) {return <input {...props} />;
}function App() {const handleClick = () => {console.log("click");};return (<div><FunComp style={{ background: "red" }} onClick={handleClick} /></div>);
}

使用{...props}可以实现透传Props和事件。上述例子中，子组件可以接收到样式属性和事件。

函数式组件-透传子节点

React中有一个特殊的属性children，表示父组件中包含的子节点。这也是需要透传的。

直接渲染children属性

function FunComp(props) {return <div>左 {props.children} 右</div>;
}function App() {return (<div><FunComp>子节点</FunComp><FunComp /></div>);
}

可以看到，直接渲染props.children，即可透传子节点。即使没有子节点，这种透传也是没问题的。如果子组件本身已经透传了props，透传的对象又是

使用透传Props实现透传子节点

既然children也是Props之一，那么直接使用透传Props的方法是否可以呢? 我们试一下。

function FunComp(props) {return <div>左 {props.children} 右</div>;
}function FunComp1(props) {return <div {...props} />;
}function FunComp2(props) {return <FunComp {...props} />;
}function App() {return (<div><FunComp1>子节点</FunComp1><FunComp1 children="子节点" /><FunComp2>子节点</FunComp2><FunComp2 children="子节点" /></div>);
}/* 页面效果
子节点
子节点
左 子节点 右
左 子节点 右
*/

FunComp1包含的子组件是一个非自定义组件div，FunComp2包含的时自定义组件FunComp，可以看到我们使用{...props}进行Props透传，children实际上都被成功渲染了，甚至对父组件直接设置children属性也可以。

冲突场景

既然Props透传即可实现，那我们为什么还要强调一遍直接渲染props.children呢，因为有时候子组件不只渲染children，还有其它内容。如果Props和直接设置的子节点冲突，那么还是直接设置的子节点优先级更高。

function FunComp(props) {return <div {...props}>左 {props.children} 右</div>;
}function App() {return (<div><FunComp>子节点</FunComp><FunComp children="子节点" /></div>);
}/* 页面效果
左 子节点 右
左 子节点 右
*/

我们同时透传了Props，也直接设置了子节点（其中包含其它内容），最后直接设置的子元素生效了。

函数式组件-透传ref

使用ref可以操作访问DOM节点，获取DOM元素上的属性或者方法。ref也是可以透传的。

透传全部属性

import { forwardRef, useRef } from "react";const FunComp = forwardRef(function (props, ref) {return <input ref={ref} />;
});function App() {const inputRef = useRef(null);function handleClick() {console.log(inputRef.current?.style);inputRef.current?.focus();}return (<div><FunComp ref={inputRef} /><div onClick={handleClick}>点击聚焦</div></div>);
}

使用forwardRef，可以透传ref属性。我们尝试了聚焦输入框，以及console输出style属性，都是正常生效的。

仅暴露部分属性

有时候我们不想暴露全部属性，仅希望暴露我们希望用户使用的部分属性，使用useImperativeHandle可以做到。

import { forwardRef, useRef, useImperativeHandle } from "react";const FunComp = forwardRef(function (props, ref) {const inputRef = useRef(null);useImperativeHandle(ref, () => {return {focus() {inputRef.current?.focus();},};});return <input ref={inputRef} />;
});function App() {const inputRef = useRef(null);function handleClick() {// 无法输出console.log(inputRef.current?.style);inputRef.current?.focus();}return (<div><FunComp ref={inputRef} /><div onClick={handleClick}>点击聚焦</div></div>);
}

我们仅向外层的ref暴露了focus，因此外层组件focus可以正常调用，但是却拿不到style属性了。使用这种形式还可以对方法进行额外的包装，或者创建一些新的ref方法。

在React19中，不再需要forwardRef了，ref直接作为一个prop属性访问。可以看最后的参考文档。

类式组件-透传Props和事件

类式组件是另一种创建React组件的方法，被React标记为过时的API，但是在老代码中还经常被使用到。我们先来看一下，在类式组件中，如何Props和事件。

import { Component } from "react";
class ClassComp extends Component {render() {return <div {...this.props}>你好</div>;}
}class App extends Component {render() {const handleClick = () => {console.log("click");};return <ClassComp style={{ background: "red" }} onClick={handleClick} />;}
}

通过上述代码可以看到，在类式组件中透传Props和事件与函数式组件一致，使用{...props}可以实现透传Props和事件。

类式组件-透传子节点

来看看类式组件是如何透传子节点的。

直接渲染children属性

import { Component } from "react";
class ClassComp extends Component {render() {return <div>左 {this.props.children} 右</div>;}
}class App extends Component {render() {return (<div><ClassComp>子节点</ClassComp><ClassComp /></div>);}
}

代码依然与类式组件基本一致，直接渲染{this.props.children}即可。

使用透传Props实现透传子节点

上一节讲到的透传Props，同样可以实现透传子节点。

import { Component } from "react";
class ClassComp extends Component {render() {return <div>左 {this.props.children} 右</div>;}
}
class ClassComp1 extends Component {render() {return <div {...this.props} />;}
}
class ClassComp2 extends Component {render() {return <ClassComp {...this.props} />;}
}class App extends Component {render() {return (<div><ClassComp1>子节点</ClassComp1><ClassComp1 children="子节点" /><ClassComp2>子节点</ClassComp2><ClassComp2 children="子节点" /></div>);}
}/* 页面效果
子节点
子节点
左 子节点 右
左 子节点 右
*/

与函数式组件一致，Props透传时也会透传children，甚至对父组件直接设置children属性也可以透传。至于Props和直接设置的子节点冲突的场景也与函数式组件一致，这里就不举例了。

类式组件-透传ref

类式组件透传Ref的形式就与函数式组件不同了。具体类式组件有不同的实现方式，我们分别介绍下：

暴露部分属性

import { Component, createRef } from "react";class ClassComp extends Component {inputRef = createRef();focus() {this.inputRef.current?.focus();}render() {return <input ref={this.inputRef} />;}
}class App extends Component {classRef = createRef();handleClick() {console.log(this.classRef.current);this.classRef.current?.focus();}render() {return (<div><ClassComp ref={this.classRef} /><div onClick={() => this.handleClick()}>点击聚焦</div></div>);}
}

通过代码可以看到，在类式组件中，不需要通过forwardRef等方法就可以使用ref访问子组件，且能执行子组件类中的方法。所以我们只要把需要暴露的内容包装成一个方法，那么就可以让父组件获取到。

在这里插入图片描述

通过输出的图可以看到，不仅能拿到方法，还能拿到属性和其它很多东西。

拿到子组件内部的ref

既然可以拿到子组件类中和属性也能拿到。那么父组件可以直接拿到子组件内部的ref属性inputRef，父组件可以直接拿到它来执行内部的方法。

import { Component, createRef } from "react";class ClassComp extends Component {inputRef = createRef();render() {return <input ref={this.inputRef} />;}
}class App extends Component {classRef = createRef();handleClick() {this.classRef.current?.inputRef?.current?.focus();}render() {return (<div><ClassComp ref={this.classRef} /><div onClick={() => this.handleClick()}>点击聚焦</div></div>);}
}

通过代码可以看到，子组件不需要透出方法了，父组件直接拿到子组件的inputRef，想执行什么就执行什么，做到了真正的“透传”。绑定ref还有另一种方式，这里也介绍一下：

import { Component, createRef } from "react";class ClassComp extends Component {render() {return <input ref="inputRef" />;}
}class App extends Component {classRef = createRef();handleClick() {this.classRef.current?.refs?.inputRef?.focus();}render() {return (<div><ClassComp ref={this.classRef} /><div onClick={() => this.handleClick()}>点击聚焦</div></div>);}
}

ref属性的值可以直接是一个字符串，通过this.refs可以拿到使用字符串形式绑定的ref。

总结

函数式组件与类式组件在Props和事件透传的方式基本一致，但是ref透传的区别较大。直接对比的话，好像类式组件的透传能力更强一些，但是它把组件内部所有内容全暴露在外，违反了封装的原则，子组件内部的改动很容易影响父组件，不是一个好的设计。

在React19版本中，ref属性也变成了prop，仅通过透传Props，就能实现透传组件大部分能力了。

参考

如何二次封装一个Vue3组件库？
https://jzplp.github.io/2023/component-lib.html
Vue3 透传Attributes
https://cn.vuejs.org/guide/components/attrs
React 使用ref操作DOM
https://zh-hans.react.dev/learn/manipulating-the-dom-with-refs
React omponent
https://zh-hans.react.dev/reference/react/Component
ref用法
https://blog.csdn.net/qq_47305413/article/details/136059266
React v19 ref作为一个属性
https://zh-hans.react.dev/blog/2024/12/05/react-19#ref-as-a-prop