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

回答

相關問題