Javascript 从“；根”；react-js中的DOM节点

假设HTML文件中有一个

：

我想将id为root的

中的属性数据人名传递给react元素

<div id="root" data-person-name="John"></div>

const-element=Hello，{data-person-name}；
render（元素，document.getElementById（'root'）；

---

请建议正确的方法。

更干净的方法是在所有自定义属性前面加上“data-”前缀。因为div元素没有已知的属性“personName”，因此使用它是违反W3规则的。 代码可能如下所示：

<div id="root" data-personName="John"></div>
const element = <h1>Hello,{document.getElementById('root').getAttribute('data-personName')}</h1>;

const element=Hello，{document.getElementById（'root'）.getAttribute（'data-personName'）}；

此名称是否应该动态更改？请注意，

personName

是

div

元素的无效属性。如果要将非DOM信息添加到元素中，请使用（例如，

数据人名

）。恐怕不清楚您在问什么。您可以通过

document.getElementById（“根”）

获取元素，并通过

getAttribute（“属性名在此”）

获取其属性值。但这感觉像是一个X/Y问题。为什么要获取属性值并在React元素中使用它？@T.J.Crowder我正在该Div上渲染一个输入组件，我必须根据某些条件在

数据人名中发送占位符。因此，为此，我需要这样做抱歉，我仍然没有得到它。通常情况下，您不会在React中使用这样的属性。你应该通过层次结构来传递道具。谢谢@arm，这对我很有效，但是有没有其他方法可以做到这一点。如果你想通过数据属性传递personName，我想没有更好的方法了。但您可以改用localStorage：在App.js中，您可以设置personName:
localStorage.setItem（'personName'，'John'）localStorage.getItem（'personName'）感谢@arm提供的解决方案
<div id="root" data-personName="John"></div>
const element = <h1>Hello,{document.getElementById('root').getAttribute('data-personName')}</h1>;