How to call a function inside the 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":""} />