ReactJS子级-过滤掉空值

7eumitmz 于 2022-12-22 发布在 React

关注(0)|答案(4)|浏览(279)

我使用以下选项渲染组件：

<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>

reactjs

来源：https://stackoverflow.com/questions/52315508/reactjs-children-filter-out-null-values

4条答案

按热度按时间

5rgfhyps1#

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

赞(0）回复(0）举报 2022-12-22

ruoxqz4g2#

children不是数组，不能按数组处理（React.children除外）。
如果您尝试使用标准的Array技术过滤空值，则不会起作用！

我只是在这上面浪费了点时间。
我遇到的问题是，我把孩子当作一个数组，然后做一些ramda拒绝所有的null，它不会工作。
当我把React.children.toArray(children)作为“拒绝零值”过滤器的输入时，一切都很好。
假设有两个孩子，其中一个为空，由以下内容生成：

<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

高温加热

赞(0）回复(0）举报 2022-12-22

apeeds0o3#

在尝试了其他答案后，我发现这是有效的。

const filteredChildren = Children.toArray(children)
    .filter((child: any) => Boolean(child.type() !== null));

赞(0）回复(0）举报 2022-12-22

fkaflof64#

代替

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

我试过了

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

toArray删除空值。

赞(0）回复(0）举报 2022-12-22

我来回答

ReactJS子级-过滤掉空值

4条答案

相关问题

热门标签

最新问答