ReactJS子项-过滤掉空值

我正在使用以下工具渲染我的组件：

{this.renderPanel1（）}
{this.renderPanel2（）}
{this.renderPanel3（）}

现在，我的一个面板只有在其available属性设置为

true

时才可用。否则，render（）-方法将返回null

My

应在除最后一个元素外的所有元素底部添加分隔符

我试图用下面的代码实现这一点，但因为即使

panel2

返回null，除法器仍然被添加，代码也无法工作

如何筛选出所有返回空值的面板？：）

{React.Children.map(
反应。儿童。托雷（道具。儿童），
（子级：React.ReactElement，i）=>{
返回(
{React.cloneElement（子元素作为React.ReactElement，子元素作为props）}
{/*在除最后一个*/}之外的所有元素后添加分隔符
{i

您必须利用Array.filter（）：

constmycomponent=（{children}）=>{
//此筛选器将仅返回NOTNULL值
const children=React.children.toArray（children.filter）（布尔值）；
//返回。。。
};而不是

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

{i

我试过了

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

{i

这很有效。
toArray删除空值。
子项不是数组，不能作为数组处理（React.children除外）。

如果您尝试使用标准数组技术过滤空值，它将不起作用

我只是耽误了一些时间

我遇到的问题是，我把孩子们当作一个数组来处理，然后做一些ramda拒绝所有的空值，这是行不通的

当我做了一个
React.children.toArray（children）
作为我的“拒绝空值”过滤器的输入时，一切都很好

想象两个孩子，其中一个为空，由以下内容生成：

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

收益率：

2
2
1

HTH
在哪里设置可用的
道具
？也许可用的
道具的逻辑可以用于过滤…仍在搜索：通过您可以直接将
道具.children
传递到
React.children.map
，无需调用
React.children.toArray
Olivier，然后我得到“未捕获类型错误：无法读取null的属性'props'”hey Mosè，当我添加过滤器时仍然无法工作。o=>o足够吗？o=>o足够过滤空值，在过滤之前打印数组，并检查是否是一个包含空元素的普通数组，因为o=>o将检查集合中的元素本身是否为空，而不是它的一个属性。这并没有回答问题。他说的是渲染出一个实际上不是空的组件，它是一个渲染空的组件，有一个
（）=>null
值。所以这被认为是真实的。
2
2
1