Как мы можем использовать строку для выполнения этой задачи? - PullRequest
Новая
       15

Как мы можем использовать строку для выполнения этой задачи?

1 голос
/ 27 апреля 2020

Любое объяснение было бы полезно, поскольку для контекста мы также используем bootstrap, поэтому я не уверен, что это функция bootstrap, с которой я не знаком. Это вывод output

export default class Counter extends Component {
      state = {
        count: 2
      };

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button className="btn btn-secondary btn-sm">Increment</button>
      </div>
    );
  }
  getBadgeClasses() {
    let classes = "badge m-2 badge-"; //this line
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

Ответы [ 2 ]

1 голос
/ 27 апреля 2020

Вы должны установить строку в className, поэтому в функции getBadgeClasses вы должны вернуть строку.

Эта часть является константой: "badge m-2 badge-", но вы хотите иметь "warning" или "primary" в badge- часть после - с некоторым условием.

, поэтому вы добавляете его в следующую строку: 

classes += this.state.count === 0 ? "warning" : "primary";

, так что возвращайте эту функцию "badge m-2 badge-primary" или "badge m-2 badge-warning"

0 голосов
/ 27 апреля 2020

база класса span bootstrap badge и coud be имеют основу стиля badge-primary или badge-warning (только цвет фона отличается) от значения счетчика.

метод getBadgeClasses всегда возвращает a Строка badge m-2 badge-primary или badge m-2 badge-warning

вы можете использовать, если оператор 

getBadgeClasses (){
 if (this.state.count === 0) {
  return 'badge m-2 badge-warning';
 } else {
  return `badge m-2 badge-primary`
 }

другим способом, используя backtick и троичный оператор 

getBadgeClasses (){
  return `badge m-2 badge-${this.state.count === 0 ? 'warning' : primary}`;
}

badge m-2 badge- фиксирован, и только тип значка - это то, как изменить в своем ответе, использовать переменную для хранения фиксированного значения, а затем добавить базу типов условия, как проверить количество

...