javascript - React 树 - 如何删除当前节点？

Question

我正在做一个关于 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});
    }
});

我该怎么做？ 不幸的是，目前我无法在后端使用数据库。(我可以在没有数据库的情况下维护状态吗？)

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

将 handleDeleteClick 传递到每个树节点，单击按钮时，您应该调用向下传递的回调(this.props.handleDeleteClick)并传入节点本身或某些节点第一个参数中的标识符(请参阅上面的定义)。