Как асинхронно загружать узлы с помощью Ant Design Treeselect?

Компонент: https://ant.design/components/tree-select/ Есть нет примера с опцией loadData.

async getChildren(node) {
    console.log(node);
    let r = $.get("/tree", {id: node.value})
    console.log(await r);  // request works
    return r;
}

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

Если я не верну обещание, я получаю огромную ошибку и пустую страницу.


person user3599803    schedule 06.09.2018    source источник


Ответы (1)


это пример функции loadData:

 onLoadData = (treeNode) => {
    console.log('load data...');
    return new Promise((resolve) => {
      setTimeout(() => {
        const treeData = [...this.state.treeData];
        getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);
        this.setState({ treeData });
        resolve();
      }, 500);
    });
  }

Вы можете найти его здесь с более подробными примерами.

Чтобы было понятнее:

  • TreeData - это массив TreeNode источник
  • Выбор дерева antd использует rc-tree, потому что antd построен поверх rc-components, вы можете см. исходный код
  • Для ленивой загрузки вам нужно манипулировать treeNode, что делает приведенный выше фрагмент: каждый раз, когда загружаются новые данные, это будет объект treeNode, и он будет вызывать обратный вызов onLoadData (), в котором вы указываете код, что делать с этим узлом. (образец просто добавляется к переменной состояния treeData]
person Yichaoz    schedule 06.09.2018
comment
Это тот же компонент? Это не похоже на муравейник. И хотя этот пример работает, он создает компонент TreeNode, и я пытаюсь использовать только treeData - person user3599803; 07.09.2018
comment
Дизайн Ant построен на основе rc-компонентов. react-component.github.io/badgeboard. их обслуживают одни и те же парни. antd - это просто тематическая версия rc-component с некоторыми урезанными реквизитами - person Yichaoz; 07.09.2018
comment
github.com/ant- дизайн / ant-design / blob / master / components /. доказательство - person Yichaoz; 07.09.2018
comment
для lazyLoad вам нужно самостоятельно управлять treeNode, treeData - это просто массив treeNode github.com/ant-design/ant-design/blob/master/components/. - person Yichaoz; 07.09.2018
comment
А как выглядит рендеринг (JSX)? Должен ли я использовать асинхронный рекурсивный рендеринг для создания TreeNodes? Как здесь: codeandbox.io/s/5ym6rw3yn4. Как видите, renderTreeNodes () - это рекурсивная функция. Мне это не нравится, я предпочитаю добавлять узлы в treeData - person user3599803; 07.09.2018
comment
вы можете просто добавить callback treeNode в state treeData. вам в любом случае потребуется рекурсия для добавления вложенных дочерних элементов. Я думаю, что приведенный мною полный пример очень ясен ... - person Yichaoz; 07.09.2018