在 Gatsby 中动态改变类答案

【问题标题】：dynamically changing classes in Gatsby在 Gatsby 中动态改变类
【发布时间】：2020-09-19 16:20:57
【问题描述】：

我正在经历这个小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>
    )
}

我已经尝试了一些事情，但由于我对反应和做事方式还很陌生，所以我有点迷茫。

任何指针都会很好。

【问题讨论】：

标签： reactjs gatsby tailwind-css

【解决方案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 类名与另一个类名合并。

// 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

【讨论】：