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

阿里姆·S

我对各自可重复使用的React组件有2个问题。

我想必须有React Component，它应该从HTMLprops的data-属性中获取对象，这应该在onload而不是event上发生。React Docs中显示的示例在ReactDOM.render方法中使用道具。我找不到一个从data属性检索道具的示例。
我还想重用React Component而不复制ReactDOM.render，而只是更改props并根据其类名安装组件。

[示例]我有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>

React组件是，

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'));

为了方便起见，JSFiddle在这里！

丹尼·朱莉（Dannyjolie）

像这样吗？

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

小提琴：https : //jsfiddle.net/rtLux0f6/1/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。