Question

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

我正在使用babel和JSX。这是一本书的练习 - 由Kirupa Chinnathambi学习反应

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 1

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

Answer 2

在定义适用于我之后放置循环：

var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363", "#85FFC7", "#297373", "#FF8552", "#A40E4C"];

var renderData = [];


  let Circle = React.createClass({
    render: function() {
      let styles = {
        background: this.props.color,
        width: 60,
        height: 60,
        borderRadius: "50%"
      }
      return ( 
      <div style={styles}></div>
      )
    }
  });
  
// STOPED WORKING AFTER THIS LOOP
for (var i = 0; i < colors.length; i++) {
  renderData.push(<Circle color ={colors[i]} />);
  }

  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 3

因为你正在做一个练习，所以这里有一些指示：

使用colors.map返回创建圆组件的jsx，可以将此行为包装在renderCircles函数中
您实际上可能会创建一个名为App的容器元素，以便ReactDOM.render变得非常简单

祝你好运。

Answer 4

基本上，您使用的<Circle>组件尚未初始化。换句话说，您尝试访问Circle，但其值为undefined。

JavaScript有一个名为 hoisting 的语言功能，它允许您在声明变量和函数之前引用它们，但如果您不了解提升规则，结果可能会非常令人惊讶。

简而言之，JS解释器将所有变量和函数声明放在它们声明的作用域的顶部。例如，代码：

console.log(a)
let a = 1;

被解释为：

let a;
console.log(a)  // value of a is undefined here 
a = 1;

要修复您的示例，只需将组件定义移到使用它的代码之上。

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

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

React中的JSX循环

4 个答案: