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

Question

This is the Component constructor and I've already bind the function checkActive which compares the props from parent component with the argument.

constructor(props) {
    super(props);

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

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

I would like to render 'active' to one of my div. So I start with:

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

I want to render it to : <div active>

The error shows: Unexpected token, expected ...

Did I make the function wrong or we cannot pass the function inside the 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":""} />