首页 > 解决方案 > 我们如何能够使用字符串来执行此任务?

问题描述

任何解释都会有所帮助,因为我们也在使用引导程序,所以我不确定这是否是我不熟悉的引导程序功能。这是输出 输出

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

标签: javascriptreactjsreact-bootstrap

解决方案


您必须在函数中设置一个字符串,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"


推荐阅读