Блог

Я использую библиотеку treebeard в react для формирования левого меню навигации.Когда данные предоставляются статически, все работает нормально, и я могу переключать узлы и все дочерние элементы. Код показан ниже:

 import React, { PureComponent } from 'react';
import { Treebeard } from 'react-treebeard';

const data = {
    toggled: false,
    name:cricket,
    children: [
        {
            name: 'Ipl',
            children: [
             { name: 'CSK VS DD' },
                { name: 'MI VS RCB' }
            ]
        },

        {
            name: 'International Series',
            children: [
                {
                    name: 'AUS vs NZ',
                    children: [
                        { name: 'T20' },
                        { name: 'ODI' }
                    ]
                }
            ]
        }
    ]
};

class Tree extends PureComponent {

    constructor(props) {
        super(props);
        this.state = { data };
        this.onToggle = this.onToggle.bind(this);
    }

    onToggle(node, toggled) {
        const { cursor, data } = this.state;
        if (cursor) {
            console.log(data);
            this.setState(() => ({ cursor, active: false }));
        }
        node.active = true;
       
        if (node.children) {
            node.toggled = toggled;
        }
        this.setState(() => ({ cursor: node, data: Object.assign({}, data) }));
    }

    render() {
        const { data } = this.state;

        return (
            <Treebeard
                data={data}
                onToggle={this.onToggle}
            />
        );
    }
}


export default Tree;
  

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

 import React, { PureComponent } from 'react';
import { Treebeard } from 'react-treebeard';

const data = {
    toggled: false,
    name:'cricket',
    children: []
};

class Tree extends PureComponent {

    constructor(props) {
        super(props);
        this.state = { data };
        this.onToggle = this.onToggle.bind(this);
    }

    addChildren = (data) => {
       
        data.children = [
            {
                name: "Sussex v Essex"
            },
            {
                name: "Hampshire v Kent"
            },
            {
                name: "Middlesex v Surrey"
            },
            {
                name: "Yorkshire v Lancashire"
            }
        ]
    }

    onToggle(node, toggled) {
        const { cursor, data } = this.state;
        if (cursor) {
            console.log(data);
            this.setState(() => ({ cursor, active: false }));
        }
        node.active = true;
        
        data.children=[
            {
                name:'IPL'
            },
            {
                name:'T20'
            }
        ]
        this.addChildren(data.children[0]);
        
        if (node.children) {
            node.toggled = toggled;
        }
        this.setState(() => ({ cursor: node, data: Object.assign({}, data) }));
    }

    render() {
        const { data } = this.state;

        return (
            <Treebeard
                data={data}
                onToggle={this.onToggle}
            />
        );
    }
}


export default Tree;
  

Ссылка на песочницу:https://codesandbox.io/s/eloquent-cookies-526yn?file=/src/index.js