样式化的组件 - 尝试通过不同的键名访问 json

Posted 2023-03-15

【中文标题】样式化的组件 - 尝试通过不同的键名访问 json

【英文标题】：Styled components - Trying to access json by a different key name

【发布时间】：2020-03-30 03:13:28

【问题描述】：

import styled from "vue-styled-components";
const props =  type: String, action: Boolean ;

const getter = () => 
  const permissionsList = JSON.parse(localStorage.getItem("UZ")).permissions;
  const type = props.type;
  const action = props.action;

  return permissionsList.type.action;
;

export const stylePermission = styled("span")`
  pointer-events: $getter() ? "" : "none";
  cursor: $getter() ? "pointer" : "not-allowed";
  opacity: $getter() ? 1 : 0.4;
`;

我就是这样用的

<template slot="tab-head-roles">
   <sp-permission type="user" action="can_approve">
      <router-link to="/settings/roles">Roles</router-link>
   </sp-permission>
</template>

我无法访问return permissionsList.type.action;，因为JSON 对象中不存在type 和action，但对象中存在type 和action 的值。

什么是我访问它的最佳方式。

【问题讨论】：

可能具有正确的属性名称？

我不能使用正确的属性名称，因为它是动态的。

localStorage.getItem("UZ") 的价值是多少？

在这种情况下，您永远无法知道您需要什么属性值。如果你的对象的结构每次都不一样，你就不会得到一致的结果

@stud3nt 我得到一个 json 对象

【参考方案1】：

您可以使用方括号将type 和action 的值用作键名：-

const getter = () => 
  const permissionsList = JSON.parse(localStorage.getItem("UZ")).permissions;
  const type = props.type;
  const action = props.action;

  return permissionsList[type][action];
;

【讨论】：

我试过这个。但我收到此错误Uncaught TypeError: Cannot read property 'function Boolean() [native code] ' of undefined

试试console.log(permissionsList[type][action])，看看你得到了什么价值。并且还可以显示权限列表示例？

【参考方案2】：

我就是这样解决的

import styled from "vue-styled-components";
const permissionProps =  type: String, action: String ;

const getter = JSON.parse(localStorage.getItem("UZ")).permissions;

export const stylePermission = styled("span", permissionProps)`
  pointer-events: $props => (getter[props.type][props.action] ? "" : "none");
  cursor: $props =>
    getter[props.type][props.action] ? "pointer" : "not-allowed";
  opacity: $props => (getter[props.type][props.action] ? 1 : 0.4);
`;