ReactJS子级-筛选出空值

Question

我用以下方法渲染组件：

<PanelGroup>
    {this.renderPanel1()}
    {this.renderPanel2()}
    {this.renderPanel3()}
</PanelGroup>

现在，只有将其可用属性设置为时，我的面板之一才可用true。render（）方法否则返回null。

我<PanelGroup>应该在除最后一个元素之外的所有元素的底部添加分隔线。

我尝试使用以下代码来完成该任务，但是因为即使panel2返回null，仍然会添加分隔符，因此该代码将无法工作。

如何过滤掉所有返回null的面板？:)

<div>
   {React.Children.map(
       React.Children.toArray(props.children),
           (child: React.ReactElement<PanelProps>, i) => {
               return (
                     <div>
                        {React.cloneElement(child as React.ReactElement<PanelProps>, child.props)}
                        {/*Add divider after all elements except last*/}
                        {i < React.Children.count(props.children) -1 && <Divider/>}
                     </div>
                )
           }
        )}
</div>

Answer 1

您必须利用Array.filter（）：

render() {
  // This filter will return only not null values
  const children = React.Children.toArray(props.children).filter(o => o);
  
  // ...your render
}

工作示例：

const arr = [1,2,3,null,4,null,5,null];
console.log(arr.filter(o=>o));

Answer 2

代替

{i < React.Children.count(props.children) -1 && <Divider/>}

我试过

{i < React.Children.toArray(props.children).length - 1 && <Divider/>}

就这样了。toArray 删除空值。