如何通过 ReactJS 向我的 html 元素添加类属性？

Question

我希望 Reactjs 在我的 html 中的 div 中添加一个名为“hello”的类。

我知道我可以简单地在 JavaScript 中通过编写 element.classList.add("hello");

但是 React 显示关键字“.add”的错误

我该怎么做？

Answer 1

您可以通过在渲染组件时包含该类来做到这一点。举个例子，如果你在做一个函数式组件，它会像这样返回：

return (
    <div>
        This is the content of the div
    </div>
);

您可以将其更改为：

return (
    <div className={someCondition ? "hello" : ""}>
        This is the content of the div
    </div>
);

...其中someCondition 控制div 是否应具有hello 类。

这是一个示例，当您单击 div 时添加类，再次单击时将其删除，等等：

const {useState, Component} = React;

function FunctionalExample() {
    const [hasClass, setHasClass] = useState(false);
    const onClick = e => setHasClass(v => !v);
    return (
        <div
            className={hasClass ? "hello" : ""}
            onClick={onClick}
        >
            Example in a functional component
        </div>
    );
}

class ClassExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hasClass: false
        };
        this.onClick = this.onClick.bind(this);
    }
    onClick() {
        this.setState(({hasClass}) => ({hasClass: !hasClass}));
    }
    render() {
        const {hasClass} = this.state;
        return (
            <div
                className={hasClass ? "hello" : ""}
                onClick={this.onClick}
            >
                Example in a class component
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        <FunctionalExample />
        <ClassExample />
    </div>,
    document.getElementById("root")
);

.hello {
    color: blue;
    font-style: italic;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>