React中如何在嵌套组件和map循环场景下使用clsx

完全可以用clsx解决该场景的需求，clsx本质是纯函数，无需固定在组件顶层调用，你可以在能访问到目标变量的任意作用域内调用。

两种常用实现方式 #

1. 直接内联调用clsx #

如果类名逻辑比较简单，直接在className属性内调用即可，可同时组合全局状态、循环项变量、render props返回的open变量：

return ( 
  <div>
    <button onClick={doSomething}>{isOpened ? <Component1 /> : <Component2 />}</button>
    <div className={clsx(containerClasses)}>
        {myData.map((item, index) =>
          <OuterComponent as='div' key={item.name}>
            {({ open }) =>
              <>
                <InnerComponent
                  className={clsx(
                    'inner-base-class', // 固定类名
                    {
                      'inner-open': open, // 基于render props返回的open判断
                      'inner-closed': !open,
                      'global-active': isOpened, // 基于全局state判断
                      'item-highlight': item.isPriority // 基于循环的单个item判断
                    }
                  )}
                >
                {/* 剩余组件逻辑 */}

2. 回调内先定义类名配置再调用 #

如果类名逻辑复杂，可以在render props的回调作用域内先定义类名配置，再传入clsx，可读性更好：

{({ open }) => {
  // 该作用域可直接访问open、当前循环item、全局isOpened等所有可用变量
  const innerClassConfig = {
    'inner-base': true,
    'active': open,
    'disabled': item.disabled,
    'global-expanded': isOpened
  }
  return (
    <>
      <InnerComponent
        className={clsx(innerClassConfig)}
      >
      {/* 其他组件逻辑 */}
    </>
  )
}}

补充说明 #

clsx会自动过滤所有假值（false、undefined、null、空字符串等），你可以放心传入任意条件判断的类名组合，无需额外处理无效值。

内容的提问来源于stack exchange，提问作者Leo Messi