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的内容，您可以在每次更改后保存树对象（您必须对其进行序列化，例如使用{{1加载页面时加载它（这次使用JSON.stringify进行反序列化）。

由于您已经很好地抽象了TreeNode组件，您应该创建一个新组件（例如JSON.parse）来实现这一点：存储树，处理添加/删除节点，处理存储。 Tree组件有一个根TreeNode，可以传递Tree内容。

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）并在第一个参数中传递节点本身或其中的一些标识符（请参阅上面的定义。）

React tree - 如何删除当前节点？

1 个答案: