从LaunchDarkly访问React.JS标志

Question

我正在尝试从我的应用程序上下文中访问LaunchDarkly标志。代码看起来像：

import { useState, useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
import { ApolloProvider } from 'react-apollo';
import { Route, Router, Switch } from 'react-router-dom';
import { withLDProvider } from 'launchdarkly-react-client-sdk';
import { Loading } from '@ap/owl-ui-controls';
import { useAuth0 } from './context/Authentication';
import LabelContext from './context/LabelContext';
import { CommunityByNameContext } from './context/CommunityByNameContext';
import { segment_init } from './utils/segment';
import withConfig, { ConfigEnum } from './utils/withConfig';
import client from './utils/graphQLClient';
import labels from './config/labels';
import CurrentUser from './services/CurrentUser';
import Layout from './Layout';
import history from './utils/history';
import { SearchCommunity } from './common/Filters/SearchNameFilter/findCommunitiesQuery';
import AmplitudeContext, { AmplitudeData } from './context/AmplitudeContext';
import { DisclosuresContextProvider } from './context/DisclosuresContext';
import placeService from './services/placesService';
import { FeaturedCommunitiesIdsProvider } from './context/FeaturedCommunitiesIdsContext';
import { optimizelyInit } from './utils/optimizely';
import { FamilyFileContextProvider } from './context/FamilyFileContext';

const segmentKey = withConfig(ConfigEnum.SEGMENT_KEY);
const currentUserString = localStorage.getItem('CURRENT_USER');

const App = () => {
  const { loading } = useAuth0();
  const [currentUser, setCurrentUser] = useState(currentUserString ? JSON.parse(currentUserString) : null);
  const [communityByName, setCommunityByName] = useState<SearchCommunity | null>(null);
  const [amplitude, setAmplitude] = useState<AmplitudeData>({});

  useEffect(() => {
    placeService.init();
  }, []);

  if (loading) {
    return <Loading />;
  }

  return (
    <>
      <Helmet>
        <title>Beacon</title>
        <script type="text/javascript">{optimizelyInit(flags)}</script>
        <script type="text/javascript">{segment_init(segmentKey, currentUser)}</script>
      </Helmet>
      <LabelContext.Provider value={labels}>
        <CommunityByNameContext.Provider value={{ communityByName, setCommunityByName }}>
          <FeaturedCommunitiesIdsProvider>
            <AmplitudeContext.Provider value={{ amplitude, setAmplitude }}>
              <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <ApolloProvider client={client}>
                  {/* @ts-ignore */}
                  <CurrentUser onUserChanged={(currentUser: any) => setCurrentUser(currentUser)}>
                    <FamilyFileContextProvider>
                      <DisclosuresContextProvider>
                        <Router history={history}>
                          <Switch>
                            <Route path="/communities" component={Layout} />
                          </Switch>
                        </Router>
                      </DisclosuresContextProvider>
                    </FamilyFileContextProvider>
                  </CurrentUser>
                </ApolloProvider>
              </MuiPickersUtilsProvider>
            </AmplitudeContext.Provider>
          </FeaturedCommunitiesIdsProvider>
        </CommunityByNameContext.Provider>
      </LabelContext.Provider>
    </>
  );
};

export default withLDProvider({
  clientSideID: withConfig(ConfigEnum.LD_CLIENT_SIDE_ID),
})(App);

我的嵌套组件，例如，<CurrentUser />获取LD标志，我可以访问它们，如：

const CurrentUser = ({ children, flags, onUserChanged })

但是，我还需要<App />中的LD标志，这样我就可以这样做：

  <Helmet>
    <title>Beacon</title>
    {flags.optimizely && <script type="text/javascript">{optimizelyInit(flags)}</script>}
    <script type="text/javascript">{segment_init(segmentKey, currentUser)}</script>
  </Helmet>

我尝试过使用const App = ({ flags })访问标志，但值始终是undefined。

我甚至尝试将下面的内容插入组件中。

const DocumentHead = ({ flags, segmentKey, currentUser }) => (
  <Helmet>
    <title>Beacon</title>
    <script type="text/javascript">{optimizelyInit(flags)}</script>
    <script type="text/javascript">{segment_init(segmentKey, currentUser)}</script>
  </Helmet>
);

标志仍未定义。

有什么建议吗？

Answer 1

显然，有一个useFlags钩子。我们可以得到旗帜如下：

const flags = useFlags();

这可以从<App />组件中调用。