当 treeselect 有空值时，它不会显示

Question

我需要TreeNode 中的antd TreeSelect 来获得null 的值。 但是当它有一个值null 时，它不会在TreeSelect 中显示它

<Tree.TreeNode value={null} title="Head menu"/>

我该如何解决这个问题？

新建->

getSubSelectTree = (topMenuItem: TopMenuItem) => {
    if (topMenuItem.subMenu.length > 0) {
        let subMenuTreeNodes = [];
        for (let x = 0; x < topMenuItem.subMenu.length; x++) {
            subMenuTreeNodes.push(this.getSubSelectTree(topMenuItem.subMenu[x]));
        }
        return <Tree.TreeNode key={topMenuItem.id.toString()} title={topMenuItem.name}
                              value={topMenuItem.id}>{subMenuTreeNodes}</Tree.TreeNode>
    }
    return <Tree.TreeNode key={topMenuItem.id.toString()} title={topMenuItem.name} value={topMenuItem.id}
    />;
};

getSelectTree = () => {
    if (this.props.menuState.topMenu !== null) {
        if (!this.props.menuState.topMenu.loading) {
            let treeNodes = [];
            for (let x = 0; x < this.props.menuState.topMenu.menuItems.length; x++) {
                treeNodes.push(this.getSubSelectTree(this.props.menuState.topMenu.menuItems[x]));
            }
            return <TreeSelect
                placeholder="Selecteer onder welk menu item het moet komen."
                allowClear
            >
                <Tree.TreeNode value={"" + null} title={"Head menu"}/>
                {treeNodes}
            </TreeSelect>;
        }
    }
    return <></>;
};

这是我现在的代码。我唯一想要的是有一个额外的 TreeNode，它说它是一个主菜单，我在创建时不会有父级。在水下它是无效的

Answer 1

要简单地显示标题，您可以删除该值并如下所示使用它

 <Tree>
    <Tree.TreeNode title={"Head Menu"}></Tree.TreeNode>
 </Tree>

Answer 2

你的问题是TreeSelect，但你的代码是Tree。不要混淆。

如果是TreeSelect，则prop value 需要是object 或string 或false，而不是null 或undefined。每个TreeNode 必须是唯一的。查看demo，让我知道

render() {
    return (
      <TreeSelect
        showSearch
        style={{ width: "100%" }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
        placeholder="Please select"
        allowClear
        treeDefaultExpandAll
        onChange={this.onChange}
      >
        <TreeNode value="parent 1" title="parent 1" key="0-1">
          <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
            <TreeNode value={"" + undefined} title="my leaf" key="random" />
            <TreeNode value={"" + null} title="your leaf" key="random1" />
          </TreeNode>
          <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
            <TreeNode
              value={false}
              title={<b style={{ color: "#08c" }}>sss</b>}
              key="random3"
            />
          </TreeNode>
        </TreeNode>
      </TreeSelect>
    );
  }