react:高阶组件wrappedComponent
时间: 2023-07-01 18:29:12 浏览: 64
React中的高阶组件(HOC)是一个函数,该函数接收一个组件作为参数并返回一个新的组件,用于增强或修改原组件的功能。在HOC中,我们可以访问和操作原组件的props、state和方法等。
其中,被传入HOC函数中的组件称为“wrapped component”或“被包装组件”,HOC函数返回的新组件则称为“enhanced component”或“被增强组件”。
在HOC中,我们可以对被包装组件进行一些额外的处理,例如添加一些新的props、事件监听、渲染条件等。最终,我们将增强后的组件返回,供其他组件使用。
例如,以下是一个用于在组件中添加Loading状态的HOC示例:
```jsx
function withLoading(WrappedComponent) {
return class extends React.Component {
state = {
isLoading: false
}
render() {
const { isLoading } = this.state;
return (
<div>
{isLoading && <div>Loading...</div>}
<WrappedComponent {...this.props} />
</div>
)
}
}
}
// 使用HOC包装组件
const MyComponentWithLoading = withLoading(MyComponent);
```
在上述示例中,我们定义了一个名为withLoading的HOC函数,该函数接收一个组件作为参数,并返回一个新的组件。在新组件中,我们添加了isLoading状态,并在原组件的前面显示Loading状态。最后,我们将增强后的组件返回,并使用该组件替换原始组件。