React函数式组件哪些部分对客户端可见？权限场景下的变量访问问题

核心结论 #

所有前端React组件的代码（包括逻辑判断、props值、未渲染的分支）都会被发送到客户端，懂技术的用户完全可以查看或获取到这些内容。

针对你提供的代码分析 #

const Page: React.FC<Props> = (props) => {
  const {x, y, z} = props;
  if(x) {
    return <>{y}</>;
  } else {
    return <>{z}</>;
  }
}

• 不管x的值是true还是false，客户端都能通过浏览器开发者工具（如Sources面板）看到整个组件的代码逻辑，包括x、y、z的解构操作。
• 即使某个分支的JSX没被渲染到页面上（比如x=true时z对应的内容没显示），z的props值依然存在于客户端内存中，用户可以通过控制台打印、断点调试等方式获取到x、y、z的所有值。

关于角色权限场景的重要提醒 #

绝对不要依赖前端条件渲染来隐藏敏感数据：

• 如果y或z包含用户无权访问的敏感内容（比如管理员专属数据），哪怕前端没把它渲染到页面，客户端依然能拿到这些数据。
• 正确的做法是在服务端完成权限校验，只将当前用户有权限查看的数据发送到前端，从根源上避免敏感数据泄露。

内容的提问来源于stack exchange，提问作者unusualhabit