반응에 새로운 하위 구성 요소를 추가 할 수 없습니다.

Question

새로운 반응이 있습니다.

SingleButtonComponent를 클릭 할 때 다른 SingleButtonComponent를 추가하고 싶습니다. 상태 변수 numChildren을 사용하여 자식 수를 늘릴 수 있습니다.

AddChild: function() { 
     var numChildren = (this.state.numChildren) +1; 
     this.setState({numChildren :numChildren}) 
    }, 

하지만

render: function() { 
    return ( 
    for (var i = 0; i < this.state.numChildren; i += 1) { 
       <SingleButtonComponent AddChild={this.AddChild}/> 
     }; 
) 
} 

내부 루프에 노력하고 때마다 나는 오류를 얻고있다.

Here is the PLUNKER to it 나는 일시적으로 렌더링 중 루프 ..에 대한

이 나에게 아이 컴포넌트 그것을 클릭 할 때마다 추가하는 방법을 제안 해주십시오 유지했다.

감사

Answer 1

귀하의 render 기능은 아무것도 반환하지 않습니다.

당신이 16 반응 사용하는 경우, 시도 :

render: function() { 
    const arr = []; 
    for (var i = 0; i < this.state.numChildren; i += 1) { 
     arr.push(<SingleButtonComponent key={i} AddChild={this.AddChild}/>); 
    } 
    return arr; 
} 

그렇지 않으면, 당신은 반환해야합니다 하나의 요소 :

render: function() { 
    const arr = []; 
    for (var i = 0; i < this.state.numChildren; i += 1) { 
     arr.push(<SingleButtonComponent key={i} AddChild={this.AddChild}/>); 
    } 
    return (<div>{arr}</div>); 
} 

---

을 두 번째 질문에 대해서는 :
React.createClass되지 않습니다를 ES6 수업에 찬성합니다. 위의 제안에 의해 지금 MainBody.render()을 얻고있다 : 유효한는 요소 (또는 null) 반작용 반환해야합니다 .. 난이 렌더링 교체 답장을

class MainBody extends React.Component { 
    constructor() { 
     this.state = { numChildren: 0 }; 
    } 

    AddChild() { ... } 

    render() { ... } 
}