React TypeScript HoC - 将 Component 作为 prop 传递

typescript

使用 React 和 typescript 编写高阶组件（Higher-Order Component）可以使我们的代码更加模块化和可复用。在这篇文章中，我们将学习如何将一个组件作为 prop 传递给高阶组件，并且 来解释这个概念。

## 什么是高阶组件？

在 React 中，高阶组件是一种函数，接受一个组件作为参数，并返回一个新的增强后的组件。这样做的好处是可以在不修改原始组件的情况下，为它添加额外的功能或逻辑。

## 将组件作为 prop 传递

通常情况下，我们将组件作为 prop 传递给另一个组件，是为了将某些功能或逻辑与组件解耦，使其可复用。使用 typescript 可以帮助我们更好地处理这种情况，因为它提供了类型检查的能力。

考虑这样一个例子，我们有一个叫做 withLogger 的高阶组件，它接受一个组件作为参数，并返回一个新的增强后的组件。这个增强后的组件将在渲染前后打印日志。

tsx
import React from 'react';
function withLogger(WrappedComponent: React.ComponentType<any>) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component is mounted');
    }
    componentWillUnmount() {
      console.log('Component is unmounted');
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}
export default withLogger;

在上面的代码中，我们定义了一个高阶组件 withLogger，它接受一个名为 WrappedComponent 的参数，并返回一个匿名的 React 组件。在这个匿名组件中，我们添加了 componentDidMount 和 componentWillUnmount 生命周期方法，用于打印日志。然后，我们将传入的组件渲染在这个匿名组件中，并将其所有的 props 传递给它。

现在，我们可以使用这个高阶组件来增强任意的组件，只需将它作为 prop 传递给需要增强的组件即可。

tsx
import React from 'react';
import withLogger from './withLogger';
function MyComponent() {
  return <div>Hello, World!</div>;
}
const EnhancedComponent = withLogger(MyComponent);
function App() {
  return <EnhancedComponent />;
}
export default App;

在上面的代码中，我们定义了一个简单的函数式组件 MyComponent，它只是渲染了一个简单的 div。然后，我们使用 withLogger 高阶组件将 MyComponent 进行了增强，生成了一个新的组件 EnhancedComponent。最后，我们将 EnhancedComponent 渲染在 App 组件中。

当我们运行这个应用时，可以在控制台中看到组件的挂载和卸载日志打印出来。

通过将组件作为 prop 传递给高阶组件，我们可以将某些功能或逻辑与组件解耦，使其可复用。在本文中，我们学习了如何使用 typescript 编写高阶组件，并且演示了一个将组件作为 prop 传递给高阶组件的案例。希望这篇文章能够帮助你更好地理解和应用高阶组件的概念。