我对各自的可重用 React 组件有 2 个问题。
我想要 React Component,它应该从 HTML 的
props
属性中获取 data-
对象,这应该发生在加载而不是事件上。 React 文档中显示的示例使用 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 组件是,
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在这里!
像这样吗?
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)
}