React中的JSX循环

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

我正在使用babel和JSX。这是从一本书练习 - 学习通过Kirupa Chinnathambi阵营

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>

来源

2017-03-03 Alexey Tseitlin

您是否尝试在组件定义之后放置for循环？ – Robsonsjre

OMG !!!!这是一个noob错误 –

因为你是在练习工作这里有一些指针：

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

祝你好运。

来源

2017-03-03 22:35:40 Perpetualcoder

1）好= = 2）我有这在我的HTML

此外，该脚本工作正常，没有循环。像这样 ReactDOM.render（

，window.add）; =（（ –

由于@paqash正在学习，我试图也指向他的最佳做法。 – Perpetualcoder

for循环应该是组件定义

来源

2017-03-03 22:41:01

配售定义后的循环后为我工作：

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>

来源

2017-03-03 22:41:57 paqash

基本上，您使用<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]} />); 
}

来源

2017-03-03 22:53:46 Andrew

React中的JSX循环

回答

相关问题