ReactJS 子项 - 过滤掉空值

IT技术 reactjs
2021-05-15 10:22:28

我正在渲染我的组件：

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

现在我的一个面板只有在其可用属性设置为 时才可用true。render() 方法否则返回 null。

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

我试图用下面的代码来完成，但因为即使panel2返回空值，分隔符仍被添加，代码将无法工作。

如何过滤掉所有返回 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>
3个回答

你必须利用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));

children 不是一个数组，不能被这样对待（除了 React.children）。

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

我只是为此失去了一些时间。

我遇到的问题是，我将孩子视为一个数组，然后执行一些 ramda 拒绝所有空值，但它不起作用。

一旦我做了一个React.children.toArray(children)“拒绝空值”过滤器的输入，一切都很好。

想象一下 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

代替

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

我试过

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

那是工作。toArray 删除空值。

其它你可能感兴趣的问题
上一篇React Apollo Client 的 Mutation 组件中的 refetchQueries 不起作用？ 下一篇如何在类组件中使用 useMediaQuery