C# 从CSHTML父元素获取数据属性

全新的反应，所以提前道歉

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

我试图构建一个测试组件，只是为了学习

该组件基本上将由一个头和一些在div块中设置的名称-值对组成。因此，我从标题开始，通过传递一个数据属性，尝试使组件成为通用组件

我有一个包含此节点的cshtml页面（解决方案是VS2019中的.NET核心MVC项目）：

我设置了一个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'));

类头扩展React.Component{
render（）{
返回(
{document.getElementById（“detailsHeaderText”）.getAttribute（“data headerText”）}
);
}
}
render（，document.getElementById（'detailsHeaderText'）；

这非常有效，并返回一个包含单词“Details”的标题

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

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

等

如何根据数据属性输入输出标题文本？ 我的想法是沿着以下伪代码的行将React render输出连接到元素：document.getElementById（“detailsHeaderText”+数据id）

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

一个答案或一个指向将变量传递到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')

功能标题（道具）{
返回{props.headertext}；
}
让elems=document.getElementsByClassName（“headerText”）；
函数renderToElements（toRender、元素、数据集）{
对于（var i=0；i

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

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

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

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