React 中的 JSX 循环答案

【问题标题】：JSX loop in ReactReact 中的 JSX 循环
【发布时间】：2017-07-24 04:32:46
【问题描述】：

制作一个显示彩色圆圈的 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>

【问题讨论】：

你有没有尝试在组件定义之后放置for循环？
天啊！！！！这是一个菜鸟的错误

标签： javascript loops reactjs react-jsx jsx

【解决方案1】：

由于你正在做一个练习，这里有一些建议：

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

祝你好运。

【讨论】：

1) 好的 =) 2) 我的 HTML 中有这个
脚本也可以在没有循环的情况下正常工作。像这样 ReactDOM.render(

, window.add); =((
由于@paqash 正在学习，我也试图向他指出最佳实践。

【解决方案2】：

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

【讨论】：

【解决方案3】：

在定义之后放置循环对我有用：

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>

【讨论】：

【解决方案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]} />);
}

【讨论】：