React JS - 在元素属性中访问组件属性

Question

我有一个定义为 class 的元素，在 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 不会将名称中带有破折号的元素识别为 prop。因此，使用 dataActivates={id}.

而不是 data-activates={id}

React JS - accessing component property in an element attribute