使用 React 的 className 属性和 PostCSS 在三元组中有条件地添加多个 类
Conditionally adding multiple classes in a ternary using React's className attribute with PostCSS
我将 PostCSS 与 React 结合使用,并希望根据组件的状态添加常规 class 和修饰符 class。简而言之,我想根据搜索输入查询的 presence/absence 执行 show/hide 切换。不幸的是,使用括号表示法似乎只是以无法识别的方式呈现 class 名称。
className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>
有人遇到过这个问题吗?
import React, { Component } from 'react';
import styles from './SiteSearch.css';
class SiteSearch extends Component {
constructor(props) {
super(props);
this.state = {
suggestions: [],
suggestionsAvailable: false
};
}
render() {
return(
<form>
...
<div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>
...
</div>
</form>
);
}
}
.site-search__suggestions {
display: none;
position: absolute;
margin-top: 5px;
border: 1px solid #e0e3e5;
height: 240px;
width: 100%;
border-radius: 6px;
background-color: rgba(255,255,255,0.9);
}
.site-search__suggestions--active {
display: block;
}
<div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] + " " + styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>
这是工作所需的条件,必须连接字符串才能正确显示。
@Carl Edwards 也有一个使用模板文字的 ES2015 解决方案:
${styles['site-search__suggestions']} ${styles['site-search__suggestions--active']}
您还可以使用Object.assign将多个对象合并为一个新对象
Object.assign{{},styles['site-search__suggestions'],styles['site-search__suggestions--active'] }
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
您可以使用.join(' ').
要连接多个子字符串,您需要制作 array[ ].
<div className={ this.state.suggestionsAvailable ? [styles['site-search__suggestions'],styles['site-search__suggestions--active']].join(' ') : styles['site-search__suggestions'] }>
我将 PostCSS 与 React 结合使用,并希望根据组件的状态添加常规 class 和修饰符 class。简而言之,我想根据搜索输入查询的 presence/absence 执行 show/hide 切换。不幸的是,使用括号表示法似乎只是以无法识别的方式呈现 class 名称。
className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>
有人遇到过这个问题吗?
import React, { Component } from 'react';
import styles from './SiteSearch.css';
class SiteSearch extends Component {
constructor(props) {
super(props);
this.state = {
suggestions: [],
suggestionsAvailable: false
};
}
render() {
return(
<form>
...
<div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>
...
</div>
</form>
);
}
}
.site-search__suggestions {
display: none;
position: absolute;
margin-top: 5px;
border: 1px solid #e0e3e5;
height: 240px;
width: 100%;
border-radius: 6px;
background-color: rgba(255,255,255,0.9);
}
.site-search__suggestions--active {
display: block;
}
<div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] + " " + styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>
这是工作所需的条件,必须连接字符串才能正确显示。
@Carl Edwards 也有一个使用模板文字的 ES2015 解决方案:
${styles['site-search__suggestions']} ${styles['site-search__suggestions--active']}
您还可以使用Object.assign将多个对象合并为一个新对象
Object.assign{{},styles['site-search__suggestions'],styles['site-search__suggestions--active'] }
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
您可以使用.join(' ').
要连接多个子字符串,您需要制作 array[ ].
<div className={ this.state.suggestionsAvailable ? [styles['site-search__suggestions'],styles['site-search__suggestions--active']].join(' ') : styles['site-search__suggestions'] }>