Question

我有一个反应组件，它是一个包含各种字段的表单，我希望能够通过传入道具来隐藏各种字段。我有一个名为hideElements的道具，它包含一个与表单元素的引号匹配的id列表。

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

Answer 1

您可以使用classnames库并使用css隐藏字段。这样你就可以保持你的反应代码干净，并且没有大量的if语句。

Answer 2

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

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

如果你想保持渲染方法更整洁，你可以在变量或函数的其他地方使用逻辑，然后输出结果（你的元素或任何东西）。

render: function() {
    return (
        {this.renderInputTitle()}
        {this.renderInputEmail()}
    )
}

Answer 3

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

<audio src='the.wav'/><audio src='quick.wav'/><audio src='brown.wav'/><audio src='fox.wav'/>

Reactjs和添加类

3 个答案: