我制作了一个可以在您的应用程序中隐藏敏感信息的反应组件。

2025-06-07

我制作了一个可以在您的应用程序中隐藏敏感信息的反应组件。

您是否曾经想展示您曾经工作过的网站或刚刚在生产系统中发布的新功能,但由于担心泄露敏感信息而无法这样做?

SafeView 是一个组件,它允许您在应用程序中以视觉方式隐藏敏感信息,以用于演示目的等。

示例 gif

为了隐藏元素,您需要做的就是使用data-safe属性来定位它。

const MyComponent = () => {
    return (
        <div>
            <span data-safe>
                // Sensitive info
            <span>
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

然后,当您想隐藏时按Shift+ S

除了用组件包装您的应用程序之外,基本上不需要任何设置<SafeView>

该库非常简单且轻量,可在 NPM 上获取。

NPM 上的“SafeView”

Github 上的“SafeView”

如果您有任何问题和/或建议,我很乐意在评论中回答。:)

文章来源:https://dev.to/itaylisaey/ive-made-a-react-component-that-hides-sensitive-information-in-your-app-6og
PREV
在 React.js 中正确使用 Modals(零 prop 钻取)
NEXT
“必须愿意在压力下工作”是一个警告信号