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

children不是数组，不能这样处理（React.children除外）。

如果您尝试使用标准数组技术过滤空值，则将无法正常工作！

我只是为此花了一些时间。

我遇到的问题是，我将孩子视为一个数组，然后做一些ramda拒绝所有的null，这是行不通的。

当我执行React.children.toArray(children)作为“拒绝null”过滤器的输入时，一切都很好。

想象一下这样的情况产生的2个孩子，其中一个为空：

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

在我的面板组渲染器中：

console.log(children.length) // 2
console.log(R.reject(R.isNil, children).length) // 2
console.log(R.reject(R.isNil, React.Children.toArray(children)).length) // 1

产量：

2
2
1

HTH

Answer 2

代替

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

我尝试过

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

就是这样。 toArray删除空值。

ReactJS子级-筛选出空值

2 个答案: