Question

这是我的代码：

{
        delay > 0
        ? <strong className="history__late"> {delayDayConst}j {delayHourConst}h {delayMin}m <FormattedMessage {...globalMessages.inProgressAndLate} />
         </strong>
        : delay < 0 
        ? <span className="history__advance"> - {delayDayConst}j {delayHourConst}h {delayMin}m <FormattedMessage {...globalMessages.inProgressAndAhead} /></span>
        : <span className="history__break"><FormattedMessage {...globalMessages.break} /></span> 
 }

我只想根据自己的条件插入一条CSS行，该CSS行指向该函数中不存在的另一个元素。我尝试了一些尝试，但没有找到解决方法。

PS：对不起，我不好意思。

Answer 1

您可以使用状态作为CSS类。请参考以下示例。在这里我认为延迟是作为道具传递的

class App extends React.Component {
  constructor({ props }) {
    super(props);
    this.state = {
        class:'class1'
    };
  }
 componentWillMount() {
       if(this.props.delay >0 )
         { 
            this.setState({class:class1})
         }
       else {
                this.setState({class:class2})
            }
   }
  render() {
    return  <div><p className={this.state.class}>hello</p></div>; // replace with your condition
  }
}

在React代码中插入CSS行

1 个答案: