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

【问题标题】：React JS - accessing component property in an element attributeReact JS - 在元素属性中访问组件属性
【发布时间】：2019-01-06 06:41:49
【问题描述】：

我有一个定义为类的元素，并且在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 中以更好的方式实现下拉菜单。

【问题讨论】：

【解决方案1】：

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

示例

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

【讨论】：

【解决方案2】：

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

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

本文档清除所有内容check the documentation

【讨论】：

【解决方案3】：

确保您已尝试以下方法：

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

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

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

干杯，

【讨论】：

【解决方案4】：

不要使用破折号。请改用 lowerCamelCase。 React 不会将名称中带有破折号的元素识别为道具。所以，不要使用data-activates={id}，而是使用dataActivates={id}。

【讨论】：