时间戳

首页 > 解决方案 > 您可以将 React useState 状态对象传递给使用 Tailwind 和 twin.macro 的样式化组件吗？

reactjs - 您可以将 React useState 状态对象传递给使用 Tailwind 和 twin.macro 的样式化组件吗？

问题描述

以下 Vue 代码有效。我正在尝试将其翻译为 React。我感兴趣的关键功能是能够通过改变状态来切换顺风类。在这种情况下，通过将 Tailwind 的显示属性从块更改为隐藏来切换显示或隐藏 div 的布尔值：

<template>
  <header>

    <button @click="isOpen = !isOpen" type="button" class="...">My Button</button> // toggle state

    <div :class"isOpen ? 'block' : 'hidden'" class="px-2 pt-2 pb-4"> //show and hide div

  </header>
</template>

<script>
  export default {
    data() {
      return {
        isOpen: false, // set state
      }
    },
  }
</script>

这是我在 React 中使用 Tailwindcss 和 twin.macro（Tailwind 和 Styled Components 的组合）使用 React 的 useState Hook 的地方：

export default function Header() {

  const [isOpen, setIsOpen] = useState(false); // declare state

  return (

    <Wrapper>

      <ButtonWrap type="button" onClick={() => setIsOpen(!isOpen)}> // toggle state

        My Button

      </ButtonWrap>

      <StyledDiv>How do I toggle a style in this?</StyledDiv> // show and hide div

    </Wrapper>
  )
}

const Wrapper = styled.div`
${tw`container shadow`};
`
const ButtonWrap = styled.button`
${tw`block text-mycolor hover:text-myothercolor focus:text-myothercolor`}
`
const StyledDiv= styled.div<Props>`
display: ${(props) => props.myProp ? 'block' : 'hidden'; // Does NOT work
`

显然，这不起作用，因为它使用的是道具而​​不是状态，并且使用 Tailwind，因为您不能使用 display:block/hidden。

请注意，问题不在于隐藏 div，这在 JSX 中很容易实现：

  {isOpen && (
     <StyledDiv> ... </StyledDiv>
  )}

如果可能，我需要解决方案来更改样式化组件本身中的 Tailwind 类。我不确定这是否可能，因为状态不是道具，而且我知道样式化组件是无状态的。我是 SC 的新手，所以也许我缺少一个简单的解决方案。

标签： reactjsstyled-componentstailwind-cssuse-state

解决方案

推荐阅读