如何在 div React Component jsx 中调用函数答案

【问题标题】：How to call a function inside the div React Component jsx如何在 div React Component jsx 中调用函数
【发布时间】：2017-11-02 03:49:32
【问题描述】：

这是组件构造函数，我已经绑定了函数 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 active>

错误显示：Unexpected token, expected ...

是我做错了函数还是我们无法在 div 中传递函数？

【问题讨论】：

active 不是有效的 HTML 属性。不，JSX 不允许以这种方式设置道具。还有其他方法，但是您要设置无效的 HTML 属性似乎很奇怪。你为什么要这么做？
@FelixKling 我只想激活显示用户知道他们在哪里的内容。我使用样式组件库。
但是active 仍然不是一个有效的 HTML 属性。您想设置 CSS 类 active 吗？ IE。 <div class="active"> ?
@FelixKling 我试过了，效果很好。但是，我想保留这个结构，所以我试图让它发挥作用。非常感谢您的支持。我想我应该使用 css 类。

标签： reactjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我觉得你可以这样试试

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

【讨论】：