javascript - 如何在<Provider>中使用另一个<Consumer>？

Question

./App.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from './context.js';
import { Provider as Provider2 } from './context2.js';
import Child from './Child.js';

import "./styles.css";

class App extends React.Component {
    render () {
        return (
            <Provider number={1}>
                <Provider2 number2={2}>
                    <Child/>
                </Provider2>
            </Provider>
        );
    }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

./Child.js

import React from 'react';
import { Consumer } from './context.js';

class Child extends React.Component {
    render() {
        return (
            <Consumer>
                {(value) => (
                    <div>{value.number}</div>
                )}
            </Consumer>
        );
    }
}

export default Child;

./context.js

import React, { createContext } from 'react';
import { Consumer as Consumer2 } from './context2.js';

const Context = createContext(undefined),
      Consumer = Context.Consumer;

class Provider extends React.Component {
    render () {
        return (
            <Consumer2>
                {(value) => (
                    <Context.Provider value={{ number:(this.props.number + value.number2) }}>
                        {this.props.children}
                    </Context.Provider>
                )}
            </Consumer2>
        );
    }
}

export { Consumer, Provider };

./context2.js

import React, { createContext } from 'react';

const Context = createContext(undefined),
      Consumer = Context.Consumer;

class Provider extends React.Component {
    render () {
        return (
            <Context.Provider value={{ number2:this.props.number2 }}>
                {this.props.children}
            </Context.Provider>
        );
    }
}

export { Consumer, Provider };

您好，正如您所看到的context.js，我在中使用Consumer2提供商。 但我收到错误值未定义。

当我将 Provider2 放入 Provider 中时，它运行良好。

但我想从服务器设置一个值，所以我必须在 App.js 中使用 Provider2>.

您可以在 https://codesandbox.io/s/py5jrj8n07 上进行测试.

有什么好的办法吗？感谢您的阅读:)

Answer 1

Provider 尝试使用 Provider2 的值。在你的index.js(应用程序)文件中，你必须切换提供者的位置，让它们能够以正确的顺序使用。 Provider2 不从 Provider 消费，所以这应该有效:

<Provider2 number2={2}>
  <Provider number={1}>
    <Child />
  </Provider>
</Provider2>