Javascript 反应树-如何删除当前节点？

我正在做一个关于react的教程，其中创建了一棵树。 例如，此变量表示为树：

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});
    }
});

var TreeNode=React.createClass({
getInitialState:函数（）{
返回{
可见：正确
};
},
handleDeleteClick:函数（）{
//我应该在这里放什么？
},
render:function（）{
console.log（this.state）；
var-childNodes；
var classObj；
if（this.props.node.childNodes！=null）{
childNodes=this.props.node.childNodes.map（函数（节点，索引）{
return

});
classObj={
togglable:是的，
“向下切换”：this.state.visible，
“启动”：！this.state.visible
};
}
var风格；
如果（！this.state.visible）{
样式={显示：“无”}；
}
返回(
{this.props.node.title}
删除

{childNodes}

);
},
切换：函数（）{
this.setState（{visible:！this.state.visible}）；
}
});

我该怎么做？

---

不幸的是，现在我不能将数据库用于后端。（我可以在没有数据库的情况下维护状态吗？

您可能不希望将树内容保存在全局变量中，而是保存在组件的状态中。您已经将组件的状态用于

visible

变量，因此尝试类似地添加

树

变量

为了在页面重新加载时保持您的状态，您可以（目前）使用类似于每次更改后保存树对象的地方（您必须序列化它，例如使用

JSON.stringify

），并在加载页面时从中加载它（这次使用

JSON.parse

）

由于您已经很好地抽象了TreeNode组件，因此您可能应该创建一个新组件（例如，

树

），它只执行以下操作：存储树、处理添加/删除节点、处理存储。树组件有一个根TreeNode，它通过

this.state.Tree

content

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

var Tree=React.createClass({
getInitialState:函数（）{
返回{
树：/。。。
};
},
handleDeleteClick:函数（节点）{
//在此处执行一些逻辑操作以删除“node”，无论它发生在何处
//确保复制this.state.tree并修改它，而不是修改
//原始对象，然后将其传递给此.setState（）
},
render:function（）{
返回；
}
});

将

handleDeleteClick

传递到每个树节点，在单击按钮时，您应该调用传递的回调（

this.props.handleDeleteClick

），并在第一个参数中传递节点本身或它的某个标识符（参见上面的定义）