Javascript 如何检查样式化组件内的状态？

我不想通过内联样式设置

Li

组件的样式，而是想通过样式化组件来实现。如果当前Li是所选语言，如何检查状态并分配红色

const Li = styled.li`
  border: 0;

  //Set color to red if this component is selected
  ${this.state => this.state.selectedLanguage`
    color: 'red';
  `}

`;

class Popular extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedLanguage: 'All'
        }

        this.updateLanguage = this.updateLanguage.bind(this);
    }

    updateLanguage(lang) {
        this.setState(function() {
            return {
                selectedLanguage: lang
            };
        });
    }
    render() {
        const languages = ['All', 'Javascript', 'Java', 'Go', 'Rust'];
        return (
            <ul className={`list-group d-flex flex-row justify-content-center ${this.props.className}`}>
                {languages.map(function(lang){
                    return (
                        <Li
                            key={lang}
                            // style={lang === this.state.selectedLanguage ? {color: '#d00d1b'} : null}
                            onClick={this.updateLanguage.bind(null, lang)}
                            className={`list-group-item p-2 ${this.props.className}`}>
                            {lang}
                        </Li>
                    )
                }, this)}
            </ul>
        );
    }
}

export default Popular;

const Li=styled.Li`
边界：0；
//如果选择此组件，请将颜色设置为红色
${this.state=>this.state.selectedLanguage`
颜色：红色；
`}
`;
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
selectedLanguage:“全部”
}
this.updateLanguage=this.updateLanguage.bind（this）；
}
更新语言（lang）{
this.setState（函数（）{
返回{
所选语言：lang
};
});
}
render（）{
const languages=['All'，'Javascript'，'Java'，'Go'，'Rust']；
返回(

{languages.map（函数（lang）{
返回(

{lang}

)
}，这个）}

);
}
}
出口违约流行；

---

代码基于

传递

isSelected

作为道具，如果为true，则调用帮助程序

const selectedLanguageStyle = css`
  color: '#d00d1b'
`

const Li = styled.li`
  border: 0;
  ${(props) => props.isSelected && selectedLanguageStyle}
`;

class Popular extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedLanguage: 'All'
    }

    this.updateLanguage = this.updateLanguage.bind(this);
  }

  updateLanguage(lang) {
    this.setState(function() {
      return {
        selectedLanguage: lang
      };
    });
  }
  render() {
    const languages = ['All', 'Javascript', 'Java', 'Go', 'Rust'];
    return (
      <ul className={`list-group d-flex flex-row justify-content-center ${this.props.className}`}>
        {languages.map(function(lang){
          return (
            <Li
              key={lang}
              isSelected={lang === this.state.selectedLanguage}
              onClick={this.updateLanguage.bind(null, lang)}
              className={`list-group-item p-2 ${this.props.className}`}>
              {lang}
            </Li>
          )
        }, this)}
      </ul>
    );
  }
}

export default Popular;

const selectedLanguageStyle=css`
颜色：“#d00d1b”
`
const Li=styled.Li`
边界：0；
${（props）=>props.isSelected&&selectedLanguageStyle}
`;
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
selectedLanguage:“全部”
}
this.updateLanguage=this.updateLanguage.bind（this）；
}
更新语言（lang）{
this.setState（函数（）{
返回{
所选语言：lang
};
});
}
render（）{
const languages=['All'，'Javascript'，'Java'，'Go'，'Rust']；
返回(

{languages.map（函数（lang）{
返回(

{lang}

)
}，这个）}

);
}
}
出口违约流行；

谢谢，这解决了我的问题（只需打开“#d00d1b”），我仍然很好奇如何传递/访问那里的状态。您通过了吗？因为无状态组件是理想的？除了拥有和设置它的组件之外，您无法访问

流行组件之外的所选语言的状态，但是您可以将其状态作为道具（
isSelected
）传递给其子组件
Li