[英]React conditional classnames using template strings and && operator
在 StackOverflow 上有很多关于将条件类名应用于 React 组件的问题; 但是,对于这种特殊情况,我还没有看到好的答案:
我有一个基本的 div,我想有条件地应用“is-required”类。 这是我的方法:
<div className={`some-class ${isRequired && 'is-required'}`}>
这里的主要问题是当 isRequired 为 false 时,我编译的 HTML 代码最终看起来像这样:
<div class='some-class false'>
显然,我可以使用这样的三元运算符,这样我就可以返回一个空字符串:
<div className={`some-class ${isRequired ? 'is-required' : ''}`}>
但是在编译的 HTML 代码中,类中包含了这个额外的随机空间,这不会导致任何渲染问题,但我仍然不喜欢它:
<div class='some-class '>
即便如此,我可以删除“someClass”之后的空格并将其包含在“isRequired”之前,但现在更难阅读并且感觉有点笨重:
<div className={`some-class${isRequired ? ' is-required' : ''}`}>
我听说过诸如类名之类的实用程序,但我正在寻找一个不需要任何其他包的简单解决方案。
这里推荐的方法是什么?
实际上,有很多方法可以做到这一点,这里是其中之一。
<div className={isRequired ? 'some-class is-required': 'some-class'}>
或者你可以返回null
<div className={isRequired ? 'is-required' : null}>
顺序,如果你有几个类。
<div className={isRequired ? 'some-class is-required': isDisabled ? 'some-disabled-class' : 'some-class'}>
https://reactjs.org/docs/conditional-rendering.html
class App extends React.Component { constructor() { super(); this.state = { isRequired: false }; } render() { return ( <div className="App"> <div className={this.state.isRequired ? 'is-required' : null}>Null</div> </div> ); } } ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='root'></div>
也许您会发现此实用程序功能很有用(它将用作标记模板):
const c = (strings = [], ...classes) => {
let myClass = '';
strings.forEach((s, i) => {
myClass += s + (classes[i] || '');
});
return myClass.trim().replace(' ', ' ');
}
现在你可以像这样使用它:
className={c`my-class ${this.props.done && 'done'} selected`}
或者
className={c`some-class ${isRequired && 'is-required'} ${isDisabled && 'some-disabled-class'}`}
如果您不想要假值,您可以使用它。
<div className={`some-class${isRequired && ' is-required' || ''}`}>
<div className={isRequired && 'is-required'}>Required</div>
使用评估短路( https://en.wikipedia.org/wiki/Short-circuit_evaluation )
如果您使用导入/导出系统,我强烈建议您使用此包来连接类名。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.