react.js에서 렌더링 할 때 트리의 루트를 제거하는 방법

Question

트리 메뉴 reakt.js를 그립니다. 첫 번째 메뉴 항목을 제거하고 싶습니다. 나는 메뉴를 더 매력적으로 보이기를 원하기 때문이다. codepen에

코드 : http://codepen.io/alex183/pen/MJwNZy

코드 :

class TreeNode extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { visible: true }; 
    } 
    toggle(){ this.setState({visible: !this.state.visible}); } 
    render() { 
    var childNodes, classObj; 

    if (this.props.node.childNodes != null) { 
     childNodes = this.props.node.childNodes.map(function(node, index) { 
     return <li key={index}><TreeNode node={node} /></li> 
     }); 
     classObj = {togglable:true, "togglable-down":this.state.visible, "togglable-up":!this.state.visible }; 
    } 

    var style; 
    if (!this.state.visible) {style = {display:"none"};} 
    return (
     <div> 
     <h5 onClick={this.toggle.bind(this)} className={classNames(classObj)}> {this.props.node.title} </h5> 
     <ul style={style}> {childNodes} </ul> 
     </div> 
    ); 
    } 
} 

var tree = { 
    title: "howdy", 
    childNodes: [ 
    {title: "bobby"}, 
    {title: "suzie", childNodes: [ 
     {title: "puppy", childNodes: [ 
     {title: "dog house"} 
     ]}, 
     {title: "cherry tree"} 
    ]} 
    ] 
}; 

ReactDOM.render(<TreeNode node={tree} />, document.getElementById("tree")); 

Answer 1

당신은 당신의 첫번째 TreeNode 구성 요소에 root 속성을 추가하고 조건부로 제목을 숨길 수 있습니다.

TreeNode를 render() 내용 :

{!this.props.root && <h5 ...> {this.props.node.title} </h5>} 

최초의 TreeNode 인스턴스 :

ReactDOM.render(<TreeNode node={tree} root={true} />, ...); 
//          ^^^^^^^^^^^