Javascript 为什么要做出反应？即使我有多个目标元素，组件也只渲染一次_Javascript_Jquery_Reactjs_Ecmascript 6

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

javascript jquery reactjs ecmascript-6

Javascript 为什么要做出反应？即使我有多个目标元素，组件也只渲染一次,javascript,jquery,reactjs,ecmascript-6,Javascript,Jquery,Reactjs,Ecmascript 6,我正在尝试创建一个带有React的小部件，它会在一个页面上呈现多次一个（比如一个特殊的按钮小部件）我用ES6风格定义我的类，如下所示： export default class myWidget extends React.Component{ ..."constructor and other methods".... render(){ return <div className="myButtonStyles">Click me</div>;

我正在尝试创建一个带有React的小部件，它会在一个页面上呈现多次一个（比如一个特殊的按钮小部件）

我用ES6风格定义我的类，如下所示：

export default class myWidget extends React.Component{

..."constructor and other methods"....

  render(){
      return <div className="myButtonStyles">Click me</div>;
  }    

}

导出默认类myWidget扩展React.Component{
…“构造函数和其他方法”。。。。
render（）{
返回点击我；
}    
}

我的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>

$（文档）.ready（函数（）{
$.each（$（'.myWidget'），函数（索引，元素）{
ReactDOM.render(
,
要素
);
})
});
第一个
第二个
三分之一

在运行代码时，我只渲染第一个代码。没有错误

我用React.createClass进行了实验，似乎渲染了三次

我错过了什么？感谢您的帮助。

您应该将span标签更改为

它可以工作，您可以检查-->

带有$（文档）的变量。就绪--->

类块扩展React.Component{
render（）{
返回（块）；
}
}
$（文档）.ready（函数（）{
$.each（$（'.block'），函数（索引，元素）{
ReactDOM.render(
,
要素
);
})
});
///html

您应该将span标记更改为

它可以工作，您可以检查-->

带有$（文档）的变量。就绪--->

类块扩展React.Component{
render（）{
返回（块）；
}
}
$（文档）.ready（函数（）{
$.each（$（'.block'），函数（索引，元素）{
ReactDOM.render(
,
要素
);
})
});
///html

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>