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>

它有效，你可以检查---＆gt; jsbin

带有$（document）.ready ---＆gt;的

变体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 个答案: