对children prop 做出反应

Question

我有以下组件来决定是否应根据用户权限呈现组件：

const Can = forwardRef(({ requiredPermissions, children }, ref): null | JSX.Element => {
    const {
        user: { role },
        userPermissions,
    } = useAuth();

    return userHasPermission(role, userPermissions, requiredPermissions) ? children : null;
});

export default Can;

我需要做的是将 传递给使用该组件时ref将在内部的子组件。Can

我怎样才能做到这一点？

Answer 1

是的你可以。但你还需要做两件事：

1. 您必须确保只有一个子组件被传递给该组件。你可以用方法检查一下React.Children.only。
2. 用于React.cloneElement传递ref给孩子。

const Can = forwardRef(({ requiredPermissions, children }, ref): null | JSX.Element => {
    const {
        user: { role },
        userPermissions,
    } = useAuth();

    return userHasPermission(role, userPermissions, requiredPermissions) 
        ? React.cloneElement(React.Children.only(children), {
            ref,
          }) 
        : null;
});

export default Can;