如何在 React 项目中为某些功能添加功能标志答案

【问题标题】：How to add a feature flag for certain features in react projects如何在 React 项目中为某些功能添加功能标志
【发布时间】：2022-07-26 00:30:32
【问题描述】：

我们有一个使用 azure devops 在 azure 中部署的 react 项目。最近，我们计划在我们现有的 React 项目中实施一个新概念。因为，完成这个概念需要将近 3 个月的时间，我们希望实现一些标记机会，以便我们的代码可以与生产代码库集成，但不会提供给客户使用。我们还将进行一些 A/B 测试MVP 完成后，与我们的一位试点客户一起。因此，在这种情况下，在我们的项目中启用某些功能标志的最佳方式是什么。有没有人对此有想法。任何想法都将受到高度赞赏。

【问题讨论】：

在不了解您的项目结构的情况下：我假设您的项目已连接到某种数据库。 1）有一个数据库表或等效的存储帐户。 2）有一个数据库表或等效的存储用户。 3) 在上述两个表中为每个客户帐户和用户创建一个条目，并为内部（员工）使用另一个帐户。 4）为您想要的功能创建一个功能表或等效项。 5) 有条件地根据帐户数据库中的功能对功能进行访问。 6) 创建一个 UI，以便只有员工才能向帐户授予功能。

标签： javascript reactjs azure-devops featuretoggle

【解决方案1】：

由于您希望实现的概念规模较大，我建议使用支持 React 的 Feature Flag 工具，例如 LaunchDarkly 或 DevCycle。这两种解决方案都允许您将代码集成到生产环境中，同时在您准备好之前将它们隐藏起来，不让客户使用。

例如，实现功能标志的一种方法是使用DevCycle’s React SDK，它看起来像这样：

import { useVariable } from '@devcycle/devcycle-react-sdk'

const App = () => {
    const variableKey = 'show-new-feature'
    const defaultValue = 'false'
    const featureVariable = useVariable(variableKey, defaultValue)

    return (
        <div>
           { featureVariable ? <div>Flag on!</div> : <div>Flag off</div>
        </div>
    )
}

上面代码中的'show-new-feature' 是在devcycle.com 上创建的变量。它在代码中被引用，因此您可以从 DevCycle 上的功能管理仪表板远程切换标志。

对于 A/B 测试，您也可以使用功能管理工具。通过选择谁接收启用标志和谁接收禁用标志，您可以为不同的用户集提供不同的功能变体。 DevCycle 有关于它的文档here。

【讨论】：