React tree - как удалить текущий узел?

Question

Я делаю учебник по реагированию, в котором создано дерево. Например эта переменная представлена ​​в виде дерева:

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

Я хочу, чтобы добавить кнопку, расположенную рядом с каждым узлом, который удаляет текущий узел и его потомков.

var TreeNode = React.createClass({ 
    getInitialState: function() { 
     return { 
      visible: true 
     }; 
    }, 
    handleDeleteClick: function() { 
     //What should I place here? 
    }, 
    render: function() { 
     console.log(this.state); 
     var childNodes; 
     var 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} className={React.addons.classSet(classObj)}> 
        {this.props.node.title} 

        <span className="input-group-btn"> 
         <button className="btn btn-default" onClick={this.handleDeleteClick}> 
          Delete 
         </button> 
        </span> 
       </h5> 

       <ul style={style}> 
        {childNodes} 
       </ul> 
      </div> 
     ); 
    }, 
    toggle: function() { 
     this.setState({visible: !this.state.visible}); 
    } 
}); 

Как это сделать? На данный момент, к сожалению, я не могу использовать базу данных для бэкэнд. (Могу ли я поддерживать состояние без одного?)

Answer 1

Возможно, вы хотите сохранить содержание дерева не в глобальной переменной, а в состоянии компонента. Вы используете состояние компонента уже для переменной visible, поэтому старайтесь также добавить переменную tree.

Чтобы сохранить ваше состояние на разных перезагрузках страниц, вы можете (на данный момент) использовать что-то вроде localStorage, где вы можете сохранить свой древовидный объект после каждого изменения (вам придется сериализовать его, например, используя JSON.stringify) и загрузить его из него, когда вы загружаете страницу (на этот раз десериализуйте с помощью JSON.parse).

С тех пор как вы уже отлично отделили компоненты TreeNode, возможно, вам следует создать новый компонент (например, Tree), который выполняет только это: храните дерево, обрабатывайте добавление/удаление узлов, обрабатывайте хранилище. Компонент Tree имеет один корневой TreeNode, который получает содержимое this.state.tree.

var Tree = React.createClass({ 
    getInitialState: function() { 
     return { 
      tree: // ... 
     }; 
    }, 
    handleDeleteClick: function(node) { 
     // do some logic here to remove `node` from whereever it occurs 
     // make sure to COPY this.state.tree and modify that, not modify the 
     // original object, then pass it to this.setState() 
    }, 
    render: function() { 
     return <TreeNode tree={this.state.tree} handleDeleteClick={this.handleDeleteClick} />; 
    } 
}); 

Pass handleDeleteClick вниз к каждому узлу дерева, на кнопку мыши, вы должны позвонить, что передавалось обратного вызова (this.props.handleDeleteClick) и передать в самом узле или какой-либо идентификатор для него в качестве первого аргумента (см его определение выше).