为什么反应.即使我有多个目标元素，组件也只渲染一次

Why React.Component only rendering once even when I have multiple target elements

本文关键字：组件 一次 元素 目标 为什么      更新时间：2023-09-26

我正在尝试用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代替，似乎渲染三次。

我错过了什么与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>
相关文章：