React：从方法中获取元素属性

【问题标题】：React: get element attribute from methodReact：从方法中获取元素属性
【发布时间】：2016-11-17 07:38:14
【问题描述】：

我有这个 div：

<div className="item #{ @test() }" data-value="1">

并且想要在方法中访问数据属性：

test: ->
 console.log ($(this).data("value"))

但我得到的是这个而不是元素：

Constructor {props: Object, context: Object, refs: Object, updater: Object, state: Object…}

【问题讨论】：

【解决方案1】：

不要将您的 DOM 节点视为事实来源。

React 中 DOM 节点的形状应始终派生自通过 props 传递给组件的数据，或作为其内部状态的一部分进行维护。

假设渲染该标签的组件的渲染方法如下所示：

return (
  <div className={`item ${this.test()}`} data-value="1"></div>
);

在这种情况下，我们将数据值属性硬编码为"1"。这不是特别有用，我们更有可能使用组件 props 中的值。

const { value = 1 } = props;

return (
  <div className={`item ${this.test()}`} data-value={value}></div>
);

现在我们可以使用该值以编程方式构建类名，而不是尝试挂钩到 DOM 节点以将其取出。

const { value = 1 } = props;
return (
  <div className={`item ${this.test(value)}` data-value={value}></div>
);

【讨论】：