Получить значение пользовательских атрибутов data-* в React Component(без события)

Question

У меня есть 2 вопроса с соответствующими повторно используемыми компонентами React.

1. Я хотел бы иметь Реагировать Компонент, который должен принять props объект из data- атрибут из HTML, это должно происходить при загрузке вместо события. В примерах, приведенных в React Docs, используются реквизиты ReactDOM.render метод. Я не смог найти пример, где мы получаем реквизит data атрибутов.

2. Я также хотел бы повторно использовать компонент 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'));

Для удобства JSFiddle здесь!

Answer 1

Что-то вроде этого?

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/