如何更新 Kendo UI TreeView 中的数据？

Question

我正在使用 Kendo UI 库中的 TreeView 组件，我想知道如何更新树中的数据。可能吗？

这是我的代码：

class TreeViewTest extends React.Component {
  dataSource = [
    {
      id: 123,
      text: "aaaa",
      expanded: true,
      spriteCssClass: "rootfolder",
      items: [
        {
          id: 2,
          text: "aaa1",
          expanded: true,
          spriteCssClass: "folder",
          items: [
            {
              id: 3,
              text: "aaa2",
              spriteCssClass: "html"
            },
            {
              id: 4,
              text: "aaa3",
              spriteCssClass: "html"
            },
            {
              id: 5,
              text: "aaa4",
              spriteCssClass: "image"
            }
          ]
        }
      ]
    }
  ];

  async componentDidUpdate(prevProps) {
    if (this.props.endpoint !== prevProps.endpoint) {
      init(this.props, this);
    }
  }

  render() {
    return (
      <div>
        <TreeView dataSource={this.dataSource} />
      </div>
    );
  }
}

const init = async (props, _this) => {
  const { endpoint, selectContent, setModal } = props;
  const actions = props;

  const response = await fetch(`${endpoint}/my/api/here`);

  const body = await response.json();
  /* some work on body here....*/
  const data = [
    {
      id: 345,
      text: "bbbb",
      expanded: true,
      spriteCssClass: "rootfolder",
      items: [
        {
          id: 2,
          text: "bbb1",
          expanded: true,
          spriteCssClass: "folder",
          items: [
            {
              id: 3,
              text: "bbb2",
              spriteCssClass: "html"
            },
            {
              id: 4,
              text: "bbb3",
              spriteCssClass: "html"
            },
            {
              id: 5,
              text: "bbb4",
              spriteCssClass: "image"
            }
          ]
        }
      ]
    }
  ];

  _this.dataSource.push(data);
};

如何在远程调用后使用新数据更新数据源？ 在安装 react 包之前，我添加了一个带有 Kendo UI jquery 版本的工作解决方案，它适用于所有更新。 使用 jquery 版本，我必须设置选项，并且我有函数 setDataSource(data) 并且它工作得很好，现在我必须做什么？

编辑 我使用 componentDidUpdate 和网络调用改进了代码。

Answer 1

您可以引用包装好的 kendo.ui.TreeView 元素。然后你可以调用你提到的函数——setDataSource(data)。这是一个例子：

class TreeViewContainer extends React.Component {
    wrappedWidget;

    constructor(props) {
        super(props);
        this.dataSource = [{
            id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                {
                    id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                        { id: 3, text: "about.html", spriteCssClass: "html" },
                        { id: 4, text: "index.html", spriteCssClass: "html" },
                        { id: 5, text: "logo.png", spriteCssClass: "image" }
                    ]
                }
            ]
        }];
    }

    render() {
        return (
            <div>
                <TreeView widgetRef={(el) => { this.wrappedWidget = el }} dataSource={this.dataSource} />
            </div>
        );
    }

    componentDidMount() {
        // Simulate a response from a web request.
        setTimeout(() => {
            this.wrappedWidget.setDataSource(new kendo.data.HierarchicalDataSource({
                data: [{
                    id: 1111, text: "My Documents1111", expanded: true, spriteCssClass: "rootfolder", items: [
                        {
                            id: 222, text: "Kendo UI Project222", expanded: true, spriteCssClass: "folder", items: [
                                { id: 333, text: "about333.html", spriteCssClass: "html" },
                                { id: 444, text: "index444.html", spriteCssClass: "html" },
                                { id: 555, text: "logo555.png", spriteCssClass: "image" }
                            ]
                        }
                    ]
                }]
            }));
        }, 1000)
    }
}
ReactDOM.render(
    <TreeViewContainer />,
    document.querySelector('my-app')
);