如何将 const 变量从一个组件传递到另一个组件答案

【问题标题】：How to pass a const variable from one component to another react如何将 const 变量从一个组件传递到另一个组件
【发布时间】：2019-12-12 12:36:22
【问题描述】：

您好，我正在尝试将 Apollo 添加到我的反应应用程序中，并且在文档中它说将您的应用程序包装在 <ApolloProvider client={client}> 标记中并将客户端作为变量传递，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import PageLayout from './components/page-layout'
import CreateApolloClient from './apollo-settings'
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient from 'apollo-boost';
import {BrowserRouter} from 'react-router-dom';

    const client = new ApolloClient({
        uri: 'http://localhost/headless-cms/admin/',
        fetchOptions: {
            mode: 'no-cors',
        },
    });


ReactDOM.render(<ApolloProvider client={client}><BrowserRouter><PageLayout /></BrowserRouter></ApolloProvider>, document.getElementById('site-wrapper'));

但是我想从 index.js 页面中删除 const client 并将其移动到另一个模板中，只是为了保持这样的组织：

import React from 'react';
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient from 'apollo-boost';

const CreateApolloClient = () => {
    const client = new ApolloClient({
        uri: 'http://localhost/headless-cms/admin/',
        fetchOptions: {
            mode: 'no-cors',
        },
    });
}

export default CreateApolloClient;

我正在努力将 CreateApolloClient 导入 index.js 页面时如何访问 const 客户端并将其传递给<ApolloProvider client={client}>

感谢您在高级方面的任何帮助

【问题讨论】：

标签： reactjs react-props react-component

【解决方案1】：

您应该在函数中返回 apollo 客户端实例并导出 createApolloClient。

import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient from 'apollo-boost';

export const createApolloClient = () => {
    return new ApolloClient({
        uri: 'http://localhost/headless-cms/admin/',
        fetchOptions: {
            mode: 'no-cors',
        },
    });
}

export default CreateApolloClient;

import React from 'react';
import ReactDOM from 'react-dom';
import PageLayout from './components/page-layout'
import {createApolloClient} from './apollo-settings'
import {BrowserRouter} from 'react-router-dom';
import { ApolloProvider } from '@apollo/react-hooks';

const client = createApolloClient();

ReactDOM.render(<ApolloProvider client={client}><BrowserRouter><PageLayout /></BrowserRouter></ApolloProvider>, document.getElementById('site-wrapper'));

【讨论】：