Jquery Reactjs和添加类

我有一个react组件，它是一个具有各种字段的表单，我希望能够通过传递道具来隐藏各种字段。Id有一个名为hideElements的属性，其中包含一个Id列表，该列表将与表单元素的引用相匹配

---

如果我使用jquery通过引用获取每个元素，并在componentDidMount中添加一个“隐藏”类，它会导致react出现问题吗？有更好的方法吗

使用jQuery有什么理由吗？能否在渲染方法中有条件地隐藏或不显示元素

// Assuming props.hideElements = {'title' : true, 'email' : true};
render: function() {
    var hideElements = this.props.hideElements;
    return (
        <div>
            <input className={hideElements['title'] ? 'hide' : null} name="title" type="text"/>
            OR
            {hideElements['email'] ? null : <input name="email" type="text" />}
        </div>
    )
}

---

您可以使用库并使用css隐藏字段。通过这种方式，您可以保持react代码干净，并且不会有太多的if语句

您可以使用refs在React中添加新类

import React from "react";
export default class Text extends React.Component {
    constructor() {
        super()
    }
    click(){
        this.refs.myDiv.className="box formControl inputBox";//using button to add a class
    }
    componentDidMount(){
        this.refs.myDiv.className="box formControl inputBox";// add a class
    }
    render() {
        return (
            <div>
                <div ref="myDiv"></div>
                <button onClick={this.click.bind(this)}>click</button>
            </div>


        )
    }

}

从“React”导入React；
导出默认类文本扩展React.Component{
构造函数（）{
超级（）
}
单击（）{
this.refs.myDiv.className=“box formControl inputBox”；//使用按钮添加类
}
componentDidMount（）{
this.refs.myDiv.className=“box formControl inputBox”；//添加一个类
}
render（）{
返回(
点击
)
}
}

如果添加一个类实际上并没有改变DOM中某些元素的存在，那么即使您应该避免它，也不应该成为问题。如果给组件的CSS类更改了DOM中组件的存在，则可能会导致React出现问题，因为它不知道元素不再存在。你想做的事情完全可以通过react的方式实现，而不必使用jQuery。除了我的背景和仍然在学习如何使用react实现类似的事情之外，jQuery没有什么特别的原因。这看起来很好，我要给它一个goHey！这就是我用的！

import React from "react";
export default class Text extends React.Component {
    constructor() {
        super()
    }
    click(){
        this.refs.myDiv.className="box formControl inputBox";//using button to add a class
    }
    componentDidMount(){
        this.refs.myDiv.className="box formControl inputBox";// add a class
    }
    render() {
        return (
            <div>
                <div ref="myDiv"></div>
                <button onClick={this.click.bind(this)}>click</button>
            </div>


        )
    }

}