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

【问题标题】：How to use clsx in nested components in React如何在 React 的嵌套组件中使用 clsx
【发布时间】：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 你能把它变成一个答案吗？
我已经尝试添加伪代码，看看是否有效

标签： javascript css reactjs typescript clsx

【解决方案1】：

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

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

【讨论】：