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

Posted 2023-03-03

【中文标题】React：从方法中获取元素属性

【英文标题】：React: get element attribute from method

【发布时间】：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…

【问题讨论】：

在你的代码中你有一个错误。当您在 className 属性中调用某个函数时，对象 this 引用了您的 React 组件，而不是渲染的元素。

@steppefox 没错，但这里真正的错误是，当您使用 React 时，您不需要访问渲染元素的属性。

【参考方案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>
);