如何使用另一個 <Consumer> 在一個 <Provider> ？

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 ，我在Provider中使用了Consumer2 。 但是我得到的錯誤值是不確定的 。

當我將Provider2放入Provider時 ，它運行良好。

但是我想從服務器設置一個值，所以我必須在App.js中使用Provider2 。

您可以在https://codesandbox.io/s/py5jrj8n07上進行測試。

有什么好主意嗎？ 謝謝閱讀 ：）

Answer 1

Provider嘗試使用Provider2的值。 在index.js（App）文件中，您必須切換提供程序的位置，以使它們能夠以正確的順序使用。 Provider2不會從Provider消費，因此這應該起作用：

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