在前端开发中，使用 BEM (Block, Element, Modifier) 命名规范来编写 CSS 类名早已不是什么新鲜事了。但是在编写 React 组件时，BEM 命名规范往往显得繁琐而冗长，尤其是当组件嵌套层次较多时。在这种情况下，引入一个 React BEM 库就可以大大简化 BEM 的使用，提高代码的可读性和可维护性。
本篇教程将介绍 npm 包 @jedmao/react-bem 的使用方法和一些技巧，希望能够帮助读者更好地应用 BEM 命名规范和提高 React 组件开发的效率。
安装和配置 @jedmao/react-bem
在使用 @jedmao/react-bem 之前，需要先进行安装和配置。
- 安装 @jedmao/react-bem
可以使用 npm 或 yarn 进行安装：
npm i --save @jedmao/react-bem
或
yarn add @jedmao/react-bem
- 配置 BEM 前缀
在使用 @jedmao/react-bem 之前，需要配置 BEM 前缀。BEM 前缀是一个字符串，用于表示组件的命名空间。一般可以根据项目的名称来设置。
在 React 项目的根组件中引入 BEMProvider 组件，并将其包裹在所有子组件外层。在 BEMProvider 组件的 props 中设置前缀字符串。
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
----- --- ------- --------------- -
-------- -
------ -
------------ --------------------
------------ --
--------------
--
-
-使用 @jedmao/react-bem
基本用法
@jedmao/react-bem 提供了一个名为 BEM 的高阶函数，可以方便地生成符合 BEM 命名规范的 className。该函数接收三个参数：
- block：表示块级组件名。
- modifiers：表示一个或多个修饰符。
- element：表示元素名。
其中，block 参数是必填项。如果只需要生成 block 级别的 className，可以只传递 block 参数。
import { BEM } from '@jedmao/react-bem';
const MyComponent = () => {
const blockClass = BEM('MyComponent');
return <div className={blockClass}>Hello, World!</div>;
};上述代码生成的 className 为 "my-project-MyComponent"，符合 BEM 命名规范。
如果需要生成带有 element 或者 modifier 的 className，可以传递三个参数。
-- -------------------- ---- -------
------ - --- - ---- --------------------
----- ----------- - -- -- -
----- ---------- - ------------------ ----- -----------
----- ------------ - ------------------ ----- ---------- - ----- ------- ---
------ -
---- -----------------------
--- ------------------------------- -----------
------
--
--上述代码生成的 className 为 "my-project-MyComponent__heading" 和 "my-project-MyComponent__heading--size-large"，表示一个带有 heading 元素、大小为 large 的修饰符的 MyComponent 组件。
嵌套使用
@jedmao/react-bem 还支持在嵌套的组件中使用。只需要在子组件中传递 props 类型为 BEMClass 的对象即可。
-- -------------------- ---- -------
------ - ---- -------- - ---- --------------------
----- -------------- - -- --------- -- -- -
----- ------------ - ------------------- ------- - ------- ---- ---
------ --- ------------------------------ ---------------
--
----- --------------- - -- -- -
----- ---------- - -----------------------
----- ------------ - ---------------------- ----- --------
------ -
---- -----------------------
--- -------------------------
--------------- ------------------------------- --------- --
-----
------
--
--上述代码中，ParentComponent 组件包含了一个嵌套的 ChildComponent 组件，并将自己的 className 作为参数传递给 ChildComponent 组件。ChildComponent 组件使用 BEMClass 函数生成一个符合 BEM 命名规范的 className，并将其应用到 li 元素上。
总结
通过 @jedmao/react-bem 库，我们可以方便地使用 BEM 命名规范来编写 React 组件的 className，从而更好地提高代码的可读性和可维护性。
在使用 @jedmao/react-bem 时，需要先进行安装和配置 BEM 前缀，然后通过 BEM 函数和 BEMClass 类型来生成符合 BEM 命名规范的 className。
希望本篇教程能够帮助读者更好地理解和使用 @jedmao/react-bem 库，并在实际开发中取得更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730081e8991b448e9286