Reactjs 如何在div React组件jsx中调用函数

这是组件构造函数，我已经绑定了checkActive函数，它将来自父组件的道具与参数进行比较

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中传递函数？

我想你可以用这种方法来尝试

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

---

您可以使用

className

在您的

div

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

active

不是有效的HTML属性。不，JSX不允许这样设置道具。还有其他的方法，但是你想要设置一个无效的HTML属性，这看起来很奇怪。你为什么要这么做？@FelixKling我只想激活显示用户知道他们在哪里的内容。我使用样式化组件库。但是

active

仍然不是有效的HTML属性。您想将CSS类设置为活动的吗？也就是说，

？@FelixKling我试过了，效果很好。然而，我想保持结构，所以我试图让它工作。非常感谢您的支持。我想我应该使用css类。

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