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

Question

我在 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?
                >

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

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

到这里为止都很好。

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

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

Answer 1

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

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

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

How to use clsx in nested components in React

javascript

css

typescript

reactjs

clsx