为什么即使我有多个目标元素，React.Component也只渲染一次

Question

我正在尝试使用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我错过了什么？ 任何帮助赞赏。

Answer 1

您应该将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>

为什么即使我有多个目标元素，React.Component也只渲染一次

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-29 12:37:30

为什么即使我有多个目标元素，React.Component也只渲染一次

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-29 12:37:30

解决方案1
0 已采纳 2016-06-29 12:37:30