我们如何使用字符串来执行此任务？

Question

任何解释都将有所帮助，在上下文中，我们也使用了引导程序，因此我不确定这是否是我不熟悉的引导程序功能。这是输出

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徽章和代码的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-是固定的，唯一的徽章类型是您答案中如何更改的一个方法，使用变量存储固定值然后添加条件的类型基础如何检查计数