ReactJS子级-筛选出空值

我用以下方法渲染我的组件:

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

现在，仅当我的面板之一的available-property设置为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>

最佳答案

您必须利用Array.filter():

const MyComponent = ({ children }) => {
  // This filter will return only not null values
  const children = React.Children.toArray(children).filter(Boolean);

  // return ...
};

工作示例:

const array = [1,2,3,null,4,null,5,null];
console.log(array.filter(Boolean));

关于ReactJS子级-筛选出空值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52315508/