如何在 React 16+ 中动态添加类？

Question

我有一个简单的 React 应用程序，我想在我的组件中动态添加类。

注意：我使用的是 React 16.6.3。

这是我尝试过的：

布局组件

import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css';
const layout = (props) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop </div>
        <main className={classes.Content}>
        {props.children}
        </main>
    </Aux>
);

export default layout;

这是我在 Layout.css 中的内容：

.Content{
    margin-top: 16px;
    color: green;
}

不幸的是，当我运行没有类的应用程序被添加到我的 div main。我做错了什么？

Answer 1

根据 CRA 的约定，CSS 模块应以 .module.(s)css 命名。所以只需将 Layout.css 的名称更改为 Layout.module.css。您还需要将导入更改为 import * as classes，因为构建过程不会生成默认导出。

Answer 2

您可以为具有属性的 class 传递变量。组件的名称需要大写。布局。

示例：

const Layout = (props) => (
<Aux>
    <div>Toolbar, SideDrawer, Backdrop </div>
    <main className={props.customClass}>
    {props.children}
    </main>
</Aux>

当你调用你的组件时，你可以这样做：

<div>
   <Layout customClass="dynamic-class" />
</div>

如何在 React 16+ 中动态添加类？

How do I add classes dynamically in React 16+?

javascript

reactjs

如何在 React 16+ 中动态添加 类？

How do I add classes dynamically in React 16+?

javascript

reactjs

如何在 React 16+ 中动态添加类？