javascript - React 中的 JSX 循环

Question

制作一个会显示彩色圆圈的 React 应用程序。但是当我添加一个 for 循环时，它停止工作了。这里错了吗？

我正在使用 babel 和 JSX。这是一本书中的练习 - Kirupa Chinnathambi 的 Learning React

var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363", "#85FFC7", "#297373", "#FF8552", "#A40E4C"];

var renderData = [];

// STOPED WORKING AFTER THIS LOOP
for (var i = 0; i < colors.length; i++) {
  renderData.push(< Circle color = {colors[i]} />);
  }

  let Circle = React.createClass({
    render: function() {
      let styles = {
        background: this.props.color,
        width: 60,
        height: 60,
        borderRadius: "50%"
      }
      return ( 
      <div style={styles}></div>
      )
    }
  });

  ReactDOM.render( 
  <div> {renderData} </div>, window.add);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="add"></div>

Answer 1

for循环应该在组件定义之后