Javascript 检索React组件中的自定义数据-*属性值（无事件）

我有两个关于各自可重用组件的问题

我想让React组件从HTML的

data-

属性中获取

props

对象，这应该在加载时发生，而不是在事件发生时。React文档中显示的示例使用

ReactDOM.render

方法中的道具。我找不到从

数据

属性检索道具的示例

我还希望重用React组件，而不复制

ReactDOM.render

，而只需更改道具并根据其类名装载组件即可

[示例]我的HTML标记为

<div class="blog" id="Politics" data-title="Political Science"></div>
<p>
Some description text..
</p>
<div class="blog" id="Economics" data-title="World Economy"></div>

一些描述文字。。

反应组分是

var propTitle = {
  'title': getTitle() //Function to retrieve data-title from respective component.
};
var Blog = React.createClass({
  render: function() {
    return (
      <h3>
        {this.props.blogtitle} 
      </h3>
    )
  }
}); 

ReactDOM.render(<Blog blogtitle={propTitle.title}/>,document.querySelectorAll('.blog'));

var-propTitle={
“title”：getTitle（）//用于从各个组件检索数据标题的函数。
};
var Blog=React.createClass({
render:function（）{
返回(
{this.props.blogtitle}
)
}
}); 
ReactDOM.render（，document.querySelectorAll（'.blog'）；

为方便起见，这里有

像这样的

var blogs = document.querySelectorAll('.blog');
for(var i = 0; i < blogs.length; i++){
    createComponent(blogs[i]);
}

function createComponent(blog){
    ReactDOM.render(<Blog blogtitle={blog.dataset.title} />, blog)
}

var blogs=document.querySelectorAll（'.blog'）；
对于（var i=0；i

---

小提琴：

太棒了！这就是我要找的。谢谢