React从CSHTML父元素获取数据属性

Question

React今天是全新的，所以提前道歉。

我在谷歌上搜索过，但无论出于什么原因，似乎都找不到答案，我知道答案一定在那里！

我正试图构建一个TEST组件来学习。

该组件基本上由一个标头和在div块中设置的多个名称-值对组成。因此，我从头部开始，并试图通过传递一个数据属性来使组件具有通用性。

我有一个带有此节点的cshtml页面(解决方案是VS2019中的.NET Core MVC项目(：

<div id="detailsHeaderText" data-headerText="Details"></div>

我已经设置了一个jsx文件，它看起来像这样：

class Header extends React.Component {
render() {
return (
<div className="col-md-12 col-sm-12"><h5>{document.getElementById("detailsHeaderText").getAttribute("data-headerText")}</h5></div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('detailsHeaderText'));

这完美地工作并且返回具有单词"的标题；细节"；

我现在想让它通用，这样我就可以在页面上的其他地方这样做：

<div class="detailsHeaderText2" data-id="2" data-headerText="Header2"></div>
<div class="detailsHeaderText3" data-id="3" data-headerText="Header3"></div>
<div class="detailsHeaderText4" data-id="4" data-headerText="Header4"></div>

etc

如何根据数据属性输入输出标题文本？我的想法是，我将React渲染输出连接到这个伪代码行的元素：document.getElementById("detailsHeaderText"+data id(

我已经研究了构造函数和super(props(，但似乎什么都不起作用，因为大多数示例都与处理程序有关，因此访问事件目标prop。我发现了许多在组件之间传递道具的链接。但是没有用于在cshtml页面上传递来自父元素的数据。

一个关于将变量传递到React的详细答案的答案或指针将是最有帮助的。提前谢谢。

Answer 1

所以我在学习React和谷歌搜索方面还有12个小时。并解决了问题。

工作代码为：

function Header(props) {
return <div className="col-md-12 col-sm-12"><h5>{props.headertext}</h5></div>;
}
let elems = document.getElementsByClassName("headerText");
function renderToElements(toRender, elements, dataset) {
for (var i = 0; i < elements.length; i++) {
let passText = elements[i].dataset[dataset];
let renderEl = React.createElement(toRender, { headertext: passText })
ReactDOM.render(renderEl, elements[i]);
}
}
renderToElements(Header, elems, 'headertext')

它呈现以下结构的所有dom节点：

<div class="headerText" data-headertext="Details"></div>

对于一些人来说，这似乎是一个毫无意义的练习，但希望这能帮助其他人掌握一些基础知识，因为我/他们现在可以在此基础上构建更复杂的组件。