在 Gatsby 中动态改变类

Question

我正在经历这个 tutorial 这个家伙正在使用 Vue，而我以前从未在 React 中动态更改过类。我正在尝试复制这个：

    <div :class="isOpen ? 'block' : 'hidden'" class="px-2 pt-2 pb-4">
      <a href="#" class="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">List your property</a>
      <a href="#" class="mt-1 block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Trips</a>
      <a href="#" class="mt-1 block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Messages</a>
    </div>
  </header>
</template>

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

这是我试图实现它的组件。

const Nav = () => {
    const data = useStaticQuery(graphql`
        query {
            site {
                siteMetadata {
                    title
                    author
                    social
                }
            }
        }
    `)

    return (
        <header className="bg-gray-900">
            <div className="flex items-center justify-between px-4 py-3 mb-4s">
                <div>
                    <h1 className="mb-0 text-2xl">
                        <Link to="/">
                            {data.site.siteMetadata.social}
                        </Link>
                    </h1>
                </div>
                <div>
                    <button type="button" className="block text-gray-500 hover:text-white focus:text-white focus:outline-none">
                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                    </svg>
                    </button>
                </div>
            </div>

            <div className="px-2 pt-2 pb-4">
                <Link
                    className="block px-2 py-1 rounded hover:bg-gray-800"
                    activeClassName=""
                >
                    Open Source
                </Link>
                <Link
                    className="mt-1 block px-2 py-1 rounded hover:bg-gray-800"
                    activeClassName=""
                    to="/posts"
                >
                    Posts
                </Link>
                <Link
                    className="mt-1 block px-2 py-1 rounded hover:bg-gray-800"
                    activeClassName=""
                    to="/contact"
                >
                    Contact
                </Link>
            </div>

        </header>
    )
}

我已经尝试了一些东西，但由于我对反应很陌生，对事情的完成方式也很陌生，所以我有点迷茫。

任何指针都会很好。

Answer 1

使用简单的三元就简单了。例如，您想在 className 'red' 和 'green' 基于变量 isOpen,

的值

// assume some variable isOpen is a boolean value which will be set dynamically

const myClassName = isOpen ? 'green' : 'red';

// in your component the set the className prop to the className you created
return (
  <div className={myClassName}>
    my dynamic element
  </div>
)

你也可以一行完成

// in your component

return (
  <div className={isOpen ? 'green' : 'red'}>
   my dynamic element
  </div>
)

这是一个 codesandbox 示例。

此外，假设您希望现有的 CSS class 名称与另一个 class名称合并，具体取决于变量的值。

// let's say you want to add 'color-green' depending on variable isOpen with 
// an existing class of 'flex-container'

const existingCls = 'flex-container'

const myClassName = isOpen ? `${existingCls} color-green` : existingCls

在 Gatsby 中动态改变类

dynamically changing classes in Gatsby

reactjs

gatsby

tailwind-css

在 Gatsby 中动态改变 类

dynamically changing classes in Gatsby

reactjs

gatsby

tailwind-css

在 Gatsby 中动态改变类