gpt4 book ai didi

javascript - 在 React 组件中检索自定义数据-* 属性值(无事件)

转载 作者:行者123 更新时间:2023-11-30 16:12:19 27 4
gpt4 key购买 nike

我有 2 个关于可重用 React 组件的问题。

  1. 我想要 React Component,它应该从 HTML 的 data- 属性中获取 props 对象,这应该发生在加载而不是事件上. React 文档中显示的示例在 ReactDOM.render 方法中使用了 Prop 。我找不到从 data 属性中检索 props 的示例。

  2. 我还想在不复制 ReactDOM.render 的情况下重用 React 组件,而只是更改 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在这儿!

最佳答案

是这样的吗?

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

fiddle :https://jsfiddle.net/rtLux0f6/1/

关于javascript - 在 React 组件中检索自定义数据-* 属性值(无事件),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36052888/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com