Javascript 如何在React组件挂载上添加类？_Javascript_Reactjs

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

javascript reactjs

Javascript 如何在React组件挂载上添加类？,javascript,reactjs,Javascript,Reactjs,我的React应用程序有一个基本div，如下所示： <body> <div id="root"> .... </div> </body> 使用jQuery，我可以做如下事情 $('#root').addClass('myClass') .... $('#root').removeClass('myClass') 在React中，通过ID查找div上的类后，添加和删除该类的等效方法是什么？这没有意义。您不应该从Re

我的React应用程序有一个基本div，如下所示：

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

使用jQuery，我可以做如下事情

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

在React中，通过ID查找div上的类后，添加和删除该类的等效方法是什么？

这没有意义。您不应该从React组件向root添加类。根div应该只存在于使用ReactDOM注入React中

不要修改html根目录，而是创建一个名为App之类的react类，并呈现一个封装所有组件的类。然后可以使用React state或props修改类名

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）从子组件修改类名，否则会很快变得混乱

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

我可以问一下原因吗？React并不意味着与jQuery无缝配合，因为它可能会违反React的生命周期和约定。我不是在尝试使用jQuery，我是在寻找在jQuery中执行某些操作的React方法。噢，哇，对不起。您肯定可以找到DOM节点并添加一个类，但我认为这不是一个好主意。根本的问题是什么？为什么添加类是特殊的？我想您是在问如何在React中为父级设置属性。我认为您不应该在React中寻找jQuery方法来做事情，它们是根本不同的。我认为在使用react时不应该以任何方式使用id属性。除此之外，root只是一个HTML元素，您可以像处理任何HTML元素一样简单地添加/删除类。如果您使用redux，您可以在存储状态中简单地拥有一个rootClass属性。

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>
        );
    }
}