Question

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

我想要React Component，它应该从HTML中的props属性获取data-对象，这应该是onload而不是event。 React Docs中显示的示例在ReactDOM.render方法中使用道具。我找不到从data属性中检索道具的示例。
我还想在不复制ReactDOM.render的情况下重用React组件，而只需更改道具并根据类名安装组件。

[示例示例]我将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 Component是，

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/

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

1 个答案: