TabBar不支持嵌套空变量

[heavenwing]

为了根据条件隐藏TabBar.Item，使用如下代码 在这个代码中如果debugTabBarItem===“”，那么就会报错。

var debugTabBarItem = "";
            if (this.props.debugMode) {
                debugTabBarItem = (
                 <TabBar.Item title="DEBUG" icon="settings">
                    <a className="btn btn-warning" href="/Account/Logout">Logout</a>
                 </TabBar.Item>
                    );
            }
            return (
<div>
    <TabBar activeIndex={this.state.activeIndex} onChange={onChange.bind(this)}>
        <TabBar.Item title="所有报表" icon="time">
            <MyAllReportList corpId={this.props.corpId} />
        </TabBar.Item>
        <TabBar.Item title="我的收藏" icon="star">
            <MyFavList corpId={this.props.corpId} />
        </TabBar.Item>
        {debugTabBarItem}
    </TabBar>
</div>

[gbk]

是否可以这样子呢？ TabBar 中要求直接子节点必须是 TabBar.Item

var items = [
  <TabBar.Item title="所有报表" icon="time">
    <MyAllReportList corpId={this.props.corpId} />
  </TabBar.Item>,
  <TabBar.Item title="我的收藏" icon="star">
    <MyFavList corpId={this.props.corpId} />
  </TabBar.Item>
];
if (this.props.debugMode) {
  items.push(
    <TabBar.Item title="DEBUG" icon="settings">
      <a className="btn btn-warning" href="/Account/Logout">Logout</a>
    </TabBar.Item>
  );
}
return <div>
  <TabBar activeIndex={this.state.activeIndex} onChange={onChange.bind(this)}>
    {items}
  </TabBar>
</div>

[heavenwing]

这种变通办法确实可以。当然如果你们能调整一下代码，让我之前（简单）的写法也能起效的话，就更好了。

[gbk]

你给出的最后一项 Item 是空字符串，而我理解你的需求应该是当 debugMode 为真时，你不希望展示最后一项，这样问题就来了，你既给出了这一项，又不希望展示……如果要兼容的话，在标签项长度判断和渲染兼容方面都会很纠结。 我们希望只遵循简单的约定：TabBar 里面约定只会有 TabBar.Item 类型子节点，给出则展示。 这样无论是展示效果还是代码结构都比较优雅～

[heavenwing]

理解。