我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文总结几个forwardRef相关的wrapper写法，其实就是对普通的组件代码进行包裹，然后拥有新的ref相关功能的意思。不用本文的forwardRef写法，ref也是可以使用的。所以，不必太在意本文的forwardRef高级用法。

苏南大叔：react教程，forwardRef相关组件包裹Wrapper写法 - forward-wrapper
react教程，forwardRef相关组件包裹Wrapper写法（图4-1）

大家好，这里是苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。本文测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

已有的forwardRef

在前面的文章里面，已经有下面的通用写法：

const Sunan_ = (props)=>{}
export const Sunan = forwardRef((props, ref) => <Sunan_ ref2={ref} {...props} />);
JavaScript
const class Sunan_ extends React.Component{}
export const Sunan = forwardRef((props, ref) => <Sunan_ ref2={ref} {...props} />);
JavaScript
子组件中使用 ref={props.ref2}

或者

export const Sunan = forwardRef(function (props, ref) {}
JavaScript
子组件中使用 ref={ref}

苏南大叔：react教程，forwardRef相关组件包裹Wrapper写法 - forwardref-已有写法
react教程，forwardRef相关组件包裹Wrapper写法（图4-2）

Wrapper1

const Sunan6_ = (props) => {
    return (
        <div>
            <input type="password" ref={props.forwardedRef} />
        </div>
    );
};
export const Sunan6 = React.forwardRef((props, ref) => {
    const Wrapper = React.memo(Sunan6_);
    return <Wrapper {...props} forwardedRef={ref} />;
});
JavaScript

调用：

<Sunan6 ref={ref6} /><button onClick={() => { ref6.current.focus() }}>6号组件</button>
JavaScript

苏南大叔：react教程，forwardRef相关组件包裹Wrapper写法 - forwardref-wrapper1
react教程，forwardRef相关组件包裹Wrapper写法（图4-3）

Wrapper2

const Wrapper2 = (Wrapper2Component) => {
    return class Wrapper extends React.Component {
        render() {
            return <Wrapper2Component {...this.props} />
        }
    }
}
const Sunan7_ = (props) => {
    return (
        <div>
            <input type="password" ref={props.forwardedRef} />
        </div>
    );
};
export const Sunan7 = Wrapper2(Sunan7_);
JavaScript

调用：

<Sunan7 forwardedRef={ref7} /><button onClick={() => { ref7.current.focus() }}>7号组件</button>
JavaScript

苏南大叔：react教程，forwardRef相关组件包裹Wrapper写法 - forwardref-wrapper2
react教程，forwardRef相关组件包裹Wrapper写法（图4-4）

结束语

更多react相关经验文章，请点击下面的链接：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   react