JSX loop in React

Question

색칠 된 원을 표시하는 React 앱 만들기. 그러나 for 루프를 추가하면 작동이 멈 춥니 다. 여기가 잘못 되었나요?

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

Answer 1

당신이 운동에 노력하고 있기 때문에 여기에 몇 가지 포인터 :

1. 사용 colors.map 반환 jsx에서 원 구성 요소를 만들면이 동작을 renderCircles 함수로 래핑 할 수 있습니다.
2. 실제로 App이라는 컨테이너 요소를 만들어 ReactDOM.render bec 아주 사소하다.

행운을 빈다.

Answer 2

구성 요소 정의 정의 후 루프를 배치

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

기본적으로

Answer 4

, 당신이하지 않은 <Circle> 구성 요소를 사용 아직 초기화되지 않았습니다. 다른 단어로 Circle에 액세스하려고 시도했지만 그 값은 undefined입니다.

JavaScript에는 hoisting이라는 언어 기능이 있습니다.이 기능을 사용하면 변수와 함수를 선언하기 전에 참조 할 수 있지만 호이 스팅 규칙을 이해하지 못하면 실제로 결과가 놀랍습니다. .

간단하게는, JS 인터프리터가에 선언 된 범위의 상단에 모든 변수와 함수 선언을두고 예를 들어, 다음 코드 :

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

당신이 문제를 해결하려면 :

console.log(a) 
let 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]} />); 
}