Применить свойство dynamici c css к элементу div, используя стилизованные реквизиты

Question

Я новичок, чтобы реагировать. Здесь я должен дать границу

border-bottom: 3px solid 'this will be dynamic'

Теперь

<div className={classNames({ [css.bgStatusContainer]: true })}>
        <Buyinginfo buyingstat={buyingStatus}/>

.bgStatusContainer {
  border-bottom: 3px solid #71b900;
}

Теперь я жестко закодировал цвет. Цвет зависит от типа статуса.

CLose - red
open -green
pre -orange

Может ли кто-нибудь помочь мне с этим?

Answer 1

Вы можете сделать строку динамической c следующим образом, в примере, который я сделал, пара ключей-значений для каждого из «типов состояния», о которых вы упомянули, и увеличивая state.pos на массив ключей каждый время менять цвет:

class Btn extends React.Component {
  state = { pos: 0 };
  obj = { close: 'red', open: 'green', pre: 'orange' };
  arr = ['close', 'open', 'pre'];

  handleClick = () => {
    this.setState({ pos: (this.state.pos + 1) % 3 });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>click</button>
        <div style={{borderBottom: `3px solid ${this.obj[this.arr[this.state.pos]]}`}}>
          Buying Info
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Btn />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>