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

Question

我有这个div：

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

并且可以在方法中访问data-attribute：

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

但我得到的不是元素：

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

Answer 1

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

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

假设呈现该标记的组件的render方法如下所示：

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

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

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>
);