在 Tailwind 中管理 UI 状态

【问题标题】：Managing UI state in Tailwind在 Tailwind 中管理 UI 状态
【发布时间】：2022-01-14 07:53:36
【问题描述】：

我想在 Tailwind CSS 中重新创建一个手风琴组件。 ${active} 按钮状态的解决方法是什么？

这是原始组件的代码：

<button className={`question-section ${active}`} onClick={toggleAccordion}>

这里是 Tailwind，我不知道把 ${active} 放在哪里：

<button 
  className="bg-transparent border-slate-600 rounded-lg shadow-md pointer w-screen" 
  {${active}}
  onClick={toggleAccordion}
>

full code

将不胜感激，谢谢✌️

【问题讨论】：

标签： reactjs tailwind-css use-state

【解决方案1】：

Tailwind 不适用于动态值。您可以改为构建一个 CSS 对象并将其传递到按钮的 style 属性中。您还可以避免使用您的useEffect()，因为您正在设置本地active 状态来驱动更改。例如，使用您的 active 和 contentRef 值：

const accordionMax = active ? `${contentRef.current.scrollHeight}px` : '0px';

...

<button 
  className='bg-transparent border-slate-600 rounded-lg shadow-md pointer w-screen'
  style={{maxHeight: accordionMax}}
  ...
>
  ...
</button>

【讨论】：