React JS-在element属性中访问组件属性

Question

我有一个定义为类的元素，并且在render()方法中，我试图为一个元素提供一个带有ID的自定义属性data-activates。但是，在生成的html中，我仅看到表达式的纯文本，其中之一：

data-activates="{this.state._id}"

data-activates="${this.state._id}"

data-activates="{id}"

data-activates="${id}"

该ID同时出现在props和state中，并且在元素外部都可以正常工作：

<a className="dropdown-button waves-effect" href="#!" data-activates="{id}">

{ id }, {this.state._id} <-在这里工作

</a>

由于某种原因，React无法解析属性内的表达式，因此我需要使用该下拉列表才能正常工作。我在做什么错了？

如果没有办法使此代码正常工作，则奖励点是在React中实现下拉菜单的更好方法。

Answer 1

您必须借助{}进入JSX中的JavaScript领域。这样，您就可以在JSX中使用任何喜欢的表达式。

示例

<a
  className="dropdown-button waves-effect"
  href="#"
  data-activates={this.state._id}
>
  Test
</a>

Answer 2

您不应将data属性包装在QUOTES内

data-activates={this.state._id}
data-activates={id}

此文档清除了所有check the documentation

Answer 3

确保您尝试了以下操作：

<a data-activates={this.state._id}>...</a>
<a data-activates={id}>...</a>

请记住，JSX首先遵循JS语法。因此，在大括号内，您仍然可以在波浪号（`）中进行插值：

<a data-activates={`my-id-${id}`}>...</a>

干杯

Answer 4

请勿使用破折号。请改用LowerCamelCase。 React无法识别名称中带有短划线的元素作为道具。因此，请使用data-activates={id}而不是dataActivates={id}。