介绍 withClientIdClassName

withClientIdClassName 是一个 React 高阶组件（Higher-Order Component，缩写为 HOC），它可以帮助你自动为组件添加唯一的 ID 和 Class。

当我们在使用 React 开发应用时，通常会需要在组件中使用一些外部库或组件，这些库或组件可能像 jQuery 插件一样需要初始化才能正常运行。在这种情况下，我们通常需要在组件中添加一个唯一的 ID，以便在初始化时使用。

同时，CSS 的局部作用域（Scoped CSS）也是一个常见的需求，我们需要为每个组件添加一个唯一的 Class。

在这些场景下，withClientIdClassName 可以帮助我们自动为组件添加 ID 和 Class，让我们的开发变得更加高效。

使用方法

使用 withClientIdClassName 很简单，只需要将组件作为参数传入即可：

import withClientIdClassName from 'withClientIdClassName';

const MyComponent = ({ clientIdClassName }) => (
  <div id={clientIdClassName.id} className={clientIdClassName.className}>
    My component
  </div>
);

export default withClientIdClassName(MyComponent);

在上面的示例中，我们将 MyComponent 组件作为参数传给 withClientIdClassName，然后导出使用 withClientIdClassName 返回的新组件。

在新组件中，我们可以通过 props 获取唯一的 ID 和 Class：

<div id={clientIdClassName.id} className={clientIdClassName.className}>

withClientIdClassName 会在组件渲染时自动为组件添加唯一的 ID 和 Class。

配置项

withClientIdClassName 支持两个可选参数：

• idPrefix：为每个生成的 ID 添加前缀。默认为 'component-'。
• classPrefix：为每个生成的 Class 添加前缀。默认为 'component-'。

你可以通过下面的方式来传递配置项：

export default withClientIdClassName(MyComponent, {
  idPrefix: 'custom-id-prefix-',
  classPrefix: 'custom-class-prefix-',
});

参考链接

• React 高阶组件 - Higher-Order Components