0

我正在尝试从我的 App 上下文中访问 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 })

但是，我还需要里面有 LD 标志，<App />所以我可以这样做：

  <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>
);

标志仍然未定义。

建议？

4

1 回答 1

0

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

const flags = useFlags();

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

于 2022-01-20T15:10:20.240 回答