如何避免ReactJS中的jQuery调用

我知道JQuery是ReactJS中的代码异味，因为它遍历整个DOM来完成它的工作。但是，我发现一些地方很难不使用它。这是我希望尽可能找到更好方法的一个例子。如何避免ReactJS中的jQuery调用

我只是想显示或隐藏基于字段是否被填充在一个div的消息...

的javascript：

if (this.props.loginInfo.userId === ''){ 
    $("#errorMessageDiv").attr('class', 'visible'); 
} else{ 
    $("#errorMessageDiv").attr('class', 'invisible'); 
}

JSX：

<div id="errorMessageDiv" className="invisible"> 
    <h1 id="credentials" className="login-error-message">&nbsp;Please Enter Proper Credentials</h1> 
</div>

来源

2016-12-21 nikotromus

您应该通常通过绑定类来实现。 – SLaks

我建议你看看classnames库。

基本上它做了什么，添加或删除了你喜欢的类名，如果你有没有条件的类名只是传递true。请参阅以下片段。

import classNames from 'classnames' 

<div 
    id="errorMessageDiv" 
    className={ classNames({ 
    'visible' : this.props.loginInfo.userId === '', 
    'invisible' : this.props.loginInfo.userId !== '', 
    'some-other-class-name' : your_condition, 
    'will-be-available-definetely' : true 
    }) } 
> 
    <h1 id="credentials" className="login-error-message">&nbsp;Please Enter Proper Credentials</h1> 
</div>

如果你只有一个条件，你可以做到以下几点：

import classNames from 'classnames' 

<div 
    id="errorMessageDiv" 
    className={ this.props.loginInfo.userId === '' ? 'visible' : 'invisible' } 
> 
    <h1 id="credentials" className="login-error-message">&nbsp;Please Enter Proper Credentials</h1> 
</div>

来源

2016-12-21 16:12:50 FurkanO

我喜欢这个！但是，如何才能在触发点击事件后触发？那可能吗？现在，当您加载页面时，默认情况下登录消息已存在。 – nikotromus

管理一个事件看起来很复杂，超出范围的样式......感谢一群FurkanO！ – nikotromus

嗯，你需要改变事件发生时的值，以便你的条件改变，最终你的类名改变。我看不到任何方式或需要。 – FurkanO

你必须定义当前的状态如何呈现眼帘，让你不得不条件绑定到的渲染错误消息。

var visibleClass = this.props.loginInfo.userId === '' ? 'visible' : 'invisible'; 
return <div id="errorMessageDiv" className={visibleClass}> 
    <h1 id="credentials" className="login-error-message">&nbsp;Please Enter Proper Credentials</h1> 
</div>

来源

2016-12-21 16:13:03

如何避免ReactJS中的jQuery调用

回答

相关问题