我们如何能够使用一个字符串来执行这个任务？

Question

任何解释都会很有帮助，对于上下文，我们也在使用bootstrap，所以我不确定这是否是我不熟悉的bootstrap特性。

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;
  }
}

Answer 1

你必须在 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"

Answer 2

bootstrap badge的span类基础，并且可以有一个样式基础 badge-primary或 badge-warning（只是背景颜色不同）基础的计数值。

getBadgeClasses方法总是返回一个字符串。badge m-2 badge-primary 或 badge m-2 badge-warning

你可以使用if语句

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

另一种方式是使用回拨和三元运算符。

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

badge m-2 badge- 在你的答案中，用一个变量来存储固定值，然后在条件的基础上添加类型，如何检查计数，只有徽章类型是固定的。