网站怎么做关键词研究,WordPress上传ftp设置,计算机学习网站,做视频网站的公司大家好#xff0c;我是DX3906。
最近遇到React高阶组件中Refs 不会被传递的问题。
在这里总结一下解决方案和解决思路#xff1a;主要是通过从内向外和从外向内2种思路来分析解决的。 目录
前言
解决方案一#xff1a;React.forwardRef
解决方案二#xff1a;使用prop…大家好我是DX3906。
最近遇到React高阶组件中Refs 不会被传递的问题。
在这里总结一下解决方案和解决思路主要是通过从内向外和从外向内2种思路来分析解决的。 目录
前言
解决方案一React.forwardRef
解决方案二使用props传递ref
结语 前言 虽然高阶组件的约定是将所有 props 传递给被包装组件但这对于 refs 并不适用。那是因为 ref 实际上并不是一个 prop - 就像 key 一样它是由 React 专门处理的。如果将 ref 添加到 HOC 的返回组件中则 ref 引用指向容器组件而不是被包装组件。 在React中Ref是一个React对象它用于访问DOM节点或组件实例。当你使用高阶组件封装组件时被封装的组件的Ref可能不会被传递到高阶组件的外部。这是因为高阶组件创建了一个包装组件它接收原始组件作为prop并且通常会创建一个新的ref来引用它。
解决方案一React.forwardRef 解决这个问题的方法之一是使用React的React.forwardRef函数。forwardRef允许你将一个ref传递给子组件这样即使组件被高阶组件封装ref也能正确地传递到最底层的组件。
下面是一个使用React.forwardRef的示例
import React, { forwardRef } from react;const EnhancedComponent React.forwardRef((props, ref) {// 将ref传递给被封装的组件return WrappedComponent {...props} forwardedRef{ref} /;
});const WrappedComponent forwardRef((props, forwardedRef) {// 使用forwardedRef来访问DOM或组件实例return div ref{forwardedRef}.../div;
});// 使用时ref将被传递到WrappedComponent的div元素
const ref React.createRef();
EnhancedComponent ref{ref} /; 在这个例子中EnhancedComponent是一个高阶组件它使用forwardRef来接收一个ref并将其传递给WrappedComponent。WrappedComponent也使用forwardRef来接收这个ref并将其应用到内部的DOM元素上。 使用forwardRef可以确保无论组件被多少层高阶组件封装ref都能正确地传递到最底层的组件。这使得你可以在需要的时候访问DOM节点或组件实例而不受高阶组件的影响。
解决方案二使用props传递ref 第一步我们把ref 添加到 HOC 的返回组件中则 ref 引用指向容器组件而不是被包装组件。 第二步在HOC 把被组装的组件的ref赋值给高阶组件外层的一个instance对象。然后使用第一步中的ref调用instance对象。 具体案例如下
function withSubscription(WrappedComponent, selectData) {return class extends React.Component {constructor(props) {super(props);this.state {data: selectData(props) // 初始状态};this.instance;}componentDidMount() {// 订阅数据源const { subscribe } this.props;subscribe(data this.setState({ data }));}componentWillUnmount() {// 取消订阅const { unsubscribe } this.props;unsubscribe();}render() {// 将数据和原始props传递给WrappedComponentreturn WrappedComponent ref{(node){this.instance node}} {...this.props} /;}};
}
import React,{useEffect,useRef} from react
function WithShow(props) {let cusRef useRef(null);useEffect((){cusRef.current.instance.被包装组件的方法()})// 使用高阶组件const MyComponentWithData withSubscription(MyComponent, props {// 根据props选择数据return someDataSource.getData(props.id);});// 然后在你的应用中使用MyComponentWithDatareturn() {// 获取Hoc外层组件的refreturn MyComponentWithData ref{cusRef} {...this.props} /;}};
}
结语
如果此文对你有帮助的话欢迎关注、点赞、⭐收藏、✍️评论支持一下博主~
