以下是一个示例代码片段,演示如何根据 props.auth 属性与路由数据按钮列表来条件性地渲染 Button 组件:
一、创建一个AuthButton公共组件
import {useRouterLoaderData} from "react-router-dom"
/**
* @function AuthButton
* @params props <any>获取按钮设置属性;如:onClick、type='danger';其中,如果该按钮需要设置权限,则需要添加属性<auth>【auth='该按钮的权限标识<此标识具有唯一性,整个项目都不能重复命名>'】
* @params buttonListName <string>设置数据路由器按钮列表属性名称,【非必填,默认为buttonList】
* @params routeUrl <string>设置数据路由器的名称,【非必填,默认为layout】
* @desc 根据条件,生成权限按钮
**/
export default funtion AuthButton(props,buttonListName='buttonList',routeUrl='layout'){// 1、获取数据路由数据const data = useRouteLoaderData(routeUrl)// 2、判断:如果没有 props.auth 属性,则创建一个 Button 组件if(!props.auth){return <Button {...props}>{props.children}</Button>}// 3、判断:如果该角色的按钮标识列表,包含该按钮权限,则创建一个 Button 组件if(data[buttonListName].includes(props.auth)){return <Button {...props}>{props.children}</Button>}return <></>
}
在上面的代码中,
如果传递给AuthButton组件的 props 中包含 auth 属性或者按钮标识列表包含传入的标识码,则它会渲染 Button 组件,并将 props 传递给 Button 组件进行渲染。
如果 props 中不包含 auth 属性并且列表也不包含标识码,则不生成按钮组件。
二、调用
<AuthButton auth='user@Edit' type='danger' className='button'></AuthButton>
三、参考链接:
1、useRouteLoaderData
React Router v6.6.1 中文手册__symbol_colon__useRouteLoaderData - 桑鸟网