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

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

您必须确保只有一个子组件被传递给组件。您可以使用 React.Children.only 方法进行检查。
使用 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;

Answer 2

使用 React.Children 和 React.cloneElement 将 ref 属性传递给 <CellMeasurer cache={this._cache} columnIndex={0} key={dataKey} parent={parent} rowIndex={rowIndex}> {({measure, registerChild}) => ( <Detalles rowData={rowData} color={color} measure={measure}/> )} </CellMeasurer> function Detalles(props) { return ( <div className={styles.tableColumn} style={{ display: "flex", flexDirection: "column", backgroundColor: props.color }}> { props.rowData.detalles.map((q) => { return <div>{q}</div> }) } </div> ); useEffect(() => { props.measure(); }); } 的所有子元素。

像这样：

Can

将 forwardRef 反应到 children 道具

2 个答案: