我尝试用TypeScript将样式化的组件应用于我的React代码。
现在我的render()方法使用循环生成多个元素，每个元素的className由另一个方法动态生成。
render() {
try {
const {steps} = this.props;
return (
<div className="step-bar">
{steps.map((s, i) => (
<div key={i} className={this.getClassName(i)}>
{s}
</div>
))}
</div>
);
} catch(e) {
utils.sendErrorObject(e);
return null;
}
};
现在我想对这个代码应用样式化组件，并根据classname处理多个样式，但我不知道如何指定条件，因为classname在代码中是动态的。
有人知道好主意吗？
试试看：
import styled from 'styled-components';
const MyStyledComponent = styled.div`
background-color: ${props => ~props.className.indexOf('current') ? 'red' : 'blue'}
`
...
render() {
return <MyStyledComponent className={this.getClassName(i)}>Text</MyStyledComponent>
}
