React面试题:React高阶组件
2023-12-18 05:54:31
回答思路:复用组件逻辑
高阶组件(HOC:Higher-Order Components)是React中用于复用组件逻辑的一种,和高阶函数(参数为函数,返回值也是函数)很相似,以组件作为参数,返回一个新的组件,它本身不属于React API,它是一种基于React组合特性的设计模式
import React, { Component } from 'react';
// withAuth 高阶组件
function withAuth(WrappedComponent) {
return class extends Component {
state = {
isAuthenticated: false,
};
componentDidMount() {
// 模拟身份验证逻辑
const isAuthenticated = checkUserAuthenticated(); // 假设有一个函数用于检查用户是否已经进行身份验证
this.setState({ isAuthenticated });
}
render() {
const { isAuthenticated } = this.state;
// 根据身份验证状态渲染原始组件或其他内容
if (isAuthenticated) {
return <WrappedComponent {...this.props} />;
} else {
return <div>请先登录</div>;
}
}
};
}
// 原始组件
class MyComponent extends Component {
render() {
return <div>经过身份验证的内容</div>;
}
}
// 使用 withAuth 高阶组件包装 MyComponent
const AuthenticatedComponent = withAuth(MyComponent);
然后直接使用<AuthenticatedComponent? />这个组件即可
缺点:prop覆盖问题
// 定义一个简单的高阶组件
function withPrefix(WrappedComponent) {
return function WithPrefix(props) {
return <WrappedComponent prefix="HOC" {...props} />;
};
}
// 原始组件
function MyComponent(props) {
return <div>{props.prefix} - {props.name}</div>;
}
// 使用高阶组件包装原始组件
const EnhancedComponent = withPrefix(MyComponent);
// 渲染组件
ReactDOM.render(<EnhancedComponent prefix="Original" name="Component" />, document.getElementById('root'));
渲染结果为:?"HOC - Component",“HOC”覆盖了“Original”
文章来源:https://blog.csdn.net/laowang357/article/details/134936943
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!