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

您可以为具有属性的类传递变量。组件名称必须大写。布局。

示例：

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

当您调用组件时，yuo可以这样做：

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

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

2 个答案: