我正在尝试使用 React 创建一个小部件，它可以在一个页面上渲染多次(比如一个特殊的按钮小部件)。
我用 ES6 风格定义我的类，如下所示:
export default class myWidget extends React.Component{
..."constructor and other methods"....
render(){
return <div className="myButtonStyles">Click me</div>;
}
}
我的 html 只是有几个相同的元素和 jQuery 选择器:
$(document).ready(function(){
$.each($('.myWidget'), function(index, element){
ReactDOM.render(
<App/>,
element
);
})
});
<div>First one <span class="myWidget"/></div>
<div>Second one <span class="myWidget"/></div>
<div>A third <span class="myWidget"/></div>
运行我的代码时，我只得到第一个渲染的代码。没有错误!
我尝试了 React.createClass，似乎渲染了 3 次。
我对 React 缺少什么？任何帮助表示赞赏。
最佳答案
您应该将 span 标记更改为 <span class="myWidget"></span>
它有效，你可以检查 ---> jsbin
$(document).ready 的变体 ---> jsbin
class Block extends React.Component {
render(){
return (<div>Block</div>);
}
}
$(document).ready(function(){
$.each($('.block'), function(index, element){
ReactDOM.render(
<Block/>,
element
);
})
});
///html
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</body>
关于javascript - 为什么即使我有多个目标元素，React.Component 也只渲染一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38099210/