如何在 React 组件挂载上添加 class？

Question

我的 React 应用有一个基础 div 像这样：

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

在我的欢迎容器中，我想添加一个 class 到 div w id="root 然后在欢迎容器卸载，删除 class.

class Welcome extends React.Component {

  componentDidMount() {
    console.log('componentDidMount');
    console.log($('#root'));
  }
  ....

使用 jQuery 我可以做类似

的事情

$('#root').addClass('myClass')
....
$('#root').removeClass('myClass')

在通过 ID 找到 div 后，在 React 中添加和删除 class 的等价物是什么？

Answer 1

这毫无意义。您不应该将 classes 添加到 React 组件的 root 中。根 div 应该只存在以将 React 注入到使用 ReactDOM 中。

不是修改 html 根，而是创建一个名为 App 的反应 class 或其他东西，并渲染一个包装所有组件的 <div className="app" />。然后，您可以使用 React state 或 props 来修改 className.

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            appClass: 'myClass'
        };
    }

    componentDidMount() {
        this.setState({ appClass: 'newClass' });
    }

    render() {
        return (
            <div className={this.state.appClass}>
                // Render children here
            </div>
        );
    }
}

如果您想从子组件（例如 Welcome 修改 appClass ，它在您的应用程序中更靠下，那么您将需要使用 Redux 或 Flux 等状态管理来修改class来自子组件的名称，否则它会很快变得混乱。

编辑：从 this.state 对象中删除了分号

如何在 React 组件挂载上添加 class？

How to add a class on React component mount?

javascript

reactjs