如何在div React Component jsx内调用函数

Question

这是Component构造函数，我已经绑定了checkActive函数，该函数将父组件的props与参数进行比较。

constructor(props) {
    super(props);

    this.checkActive = this.checkActive.bind(this);
  }

  checkActive(option) {
    if (this.props.active === option) {
      return 'active';
    }
  }

我想对我的一个div进行“激活”。 所以我开始：

<div {this.checkActive('meet')}>

我想将其渲染为： <div active>

错误显示： 意外的令牌，预期的...

我将函数弄错了吗，或者我们无法在div内部传递函数？

Answer 1

<div active={this.props.active === "meet" ? "true" : void 0} />

Answer 2

您可以在div使用className激活下面的组件

<div className={this.props.active === "meet" ? "active" : ""} />

Answer 3

我想你可以这样尝试

 <div className={this.props.active == "meet"?"active":""} />