如何在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

您可以向第一个root组件添加TreeNode属性，并有条件地隐藏标题。

TreeNode render()内容：

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

第一个TreeNode实例化：

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