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} />, ...); 
//          ^^^^^^^^^^^