react用typescript返回cloneElement时的类型问题

Question

代码如下

interface Props {
    role: string,
    children: ReactChild
}
const HasRole: React.FC<Props> = ({role, children, ...props}) => {
    const roles = useSelector(state => state.roles);
    if (roles.includes(role)) {
        return Children.map(children, child => {
            if (isValidElement(child)) {
                return cloneElement(child, props);
            }
            return child;
        })
    } else {
        return null;
    }
}

这是报错

所以，HasRole 的类型究竟应该怎么写？

Answer 1

组件只能有一个根元素，Children.map返回了数组,如果定义为组件的话稍微改下就可以了：

interface Props {
    role: string,
    children: ReactChild
}
const HasRole: React.FC<Props> = ({role, children, ...props}) => {
    const roles = useSelector(state => state.roles);
    if (roles.includes(role)) {
        return (
            <>
                {
                    Children.map(children, child => {
                        if (isValidElement(child)) {
                            return cloneElement(child, props);
                        }
                        return child;
                    })
                }
            </>
        )
    } else {
        return null;
    }
}

或者不做组件使用，只当作普通的渲染方法：

interface Props {
    role: string,
    children: ReactChild
}
const HasRole: React.ReactNode = ({role, children, ...props}: Props) => {
    ...
}