如何在 React 的嵌套组件中使用 clsx

Posted 2023-03-13

【中文标题】如何在 React 的嵌套组件中使用 clsx

【英文标题】：How to use clsx in nested components in React

【发布时间】：2021-12-24 00:38:26

【问题描述】：

我在 React 应用程序中使用 clsx，但当存在映射和嵌套组件时，我遇到了如何使用它的问题。

例如：

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=// how to compute this value?
                >

上面我们有一个返回的 JSX，一个外部 div 元素，一个值 isOpened，它来自状态，所以我们可以在任何地方访问它。这意味着我们可以实现以下containerClasses：

const containerClasses = 
    'class1 ': true,
    'class2': isOpened,
    'class3': !isOpened
  ;

到这里为止一切顺利。

但正如您所见，myData.map(...) 会遍历一个数组。在这里，我需要根据open 的值计算innerClasses。但是这个值只能在循环内部访问，而不是在 return 之外和函数内部。

有没有办法用 clsx 解决这个问题？

【问题讨论】：

创建一个名为 getClasses 的方法，将 open 作为 prop 传递给它并返回 classes 对象

@Madhuri 你能把它变成一个答案吗？

我已经尝试添加伪代码，看看是否有效

【参考方案1】：

const getClasses= (open) => 
  return clsx(
     [classes.class1]: open, // desired classname and condition
  )

<InnerComponent
    className=getClasses(open) //call a method here
>