Conditional <Panel /> makes rc-collapse crash on child.key

[jorisw]

Hi,

I'm conditionally putting <Panel />s like this:

{ content.location &&
<Panel header="Location" key="4">
   <p>
       {content.location.value}
   </p>
</Panel>
}

However, when the evaluation of content.location returns false, and no <Panel /> is inserted, rc-collapse breaks because it expects a child with a .key property:

TypeError: null is not an object (evaluating 'child.key')

If rc-collapse would check if child exists before reading key, it would allow us to dynamically insert <Panel />s based on conditions, like in the example above.

[shepherdwind]

That because Panel should not be null, You can filter empty child like this

const items = [];
if (content.location) {
  items.push(<Panel />);
}

And I will fix this soon.

[ystarlongzi]

@shepherdwind
刚好今天也碰到这个问题，采用的方法和 @jorisw 类似，并且你推荐的方案确实可行。但在实际开发中，相信大部分开发者默认也会使用 @jorisw 这种方式吧。

感觉如果在<Collapse /> 组件内部对值为 null、undefined、false 的子元素过滤掉，这样应该对开发更友好吧。

还是说作者有其它设计意图？

[afc163]

其他组件也都优化了，可以改下：

react-component/menu#57
react-component/tabs#31

@ystarlongzi 来个 PR 如何？

[ystarlongzi]

@afc163 好的，等下提交下