React 检查来自包装组件的访问

Answer 1

您可以通过多种方式做到这一点。如果您想保持类似的流程（使用访问包装器），那么您应该让包装器本身处理单击以有条件地呈现按钮。

这是一种简单的方法来做到这一点（如上所述，有很多方法可以做到这一点，如果您想要不同的版本，请告诉我）：

import React from "react";

const AccessControl = ({ hasAccess, handleClick, children }) => {
    const handleButtonClick = () => {
        if (hasAccess) {
            handleClick();
        } else {
            console.log('Access denied');
        }
    };

    return (
        <div>
            {hasAccess ? (
                children
            ) : (
                <button disabled onClick={handleButtonClick}>
                    Access Denied
                </button>
            )}
        </div>
    );
};

export default AccessControl;

用法：

<AccessControl hasAccess={checkUserAccess()}>
   <UltimateButton
     btntext="+ New document"
     classes="btn-primary"
     handleClick={create_new_doc}
   />
</AccessControl>