React函数组件中如何过滤props.children并解决子组件不渲染问题

• map回调无返回值：你在map的回调函数中使用了花括号包裹逻辑（显式块级作用域），但所有分支都没有添加return语句返回需要渲染的JSX元素，导致map最终返回全是undefined的数组，自然没有内容渲染到页面上。
• 子属性访问路径错误：React生成的子元素对象的所有自定义属性都存储在props字段下，直接访问child.align无法拿到对应的属性值，必须通过child.props.align访问。
• 原生map存在兼容风险：如果props.children是单个子元素而非数组，直接调用数组的map方法会触发报错，原生map无法兼容children的多种合法格式。

推荐使用React官方提供的React.Children.map工具方法处理子元素，它可以自动兼容单个子元素、null、布尔值等边缘情况，同时补全return语句和修正属性访问路径即可，修复后代码如下：

import { Children, isValidElement } from 'react';

function Footer(props: FooterProps) {
   return (
     <div>
        {Children.map(props.children, child => {
            // 先判断是否为有效React元素，避免文本节点等场景报错
            if (isValidElement(child) && child.props.align === "right") {
                // 符合条件的元素用div包裹后返回
                return (
                  <div>
                    {child}
                  </div>
                )
            }
            // 不符合条件的元素直接返回
            return child;
        })}
    </div>
   );
};

如果想简化代码也可以使用隐式返回的写法：

import { Children, isValidElement } from 'react';

function Footer(props: FooterProps) {
   return (
     <div>
        {Children.map(props.children, child => 
          isValidElement(child) && child.props.align === "right" 
            ? <div>{child}</div>
            : child
        )}
    </div>
   );
};

内容的提问来源于stack exchange，提问作者John。