javascript - 如何在 React 中处理多个上下文？

Question

React 新手 - 我正在尝试在我的 App 组件中使用多个上下文，我尝试遵循官方指南 multiple contexts .

这是我当前的代码:

App.js

import React from "react";
import { render } from "react-dom";
import Login from "./Login";
import AuthContext from "./AuthContext";
import LayoutContext from "./LayoutContext";
import LoadingScreen from "./LoadingScreen";

class App extends React.Component {
  render() {
    const { auth, layout } = this.props;

    return (
      <LayoutContext.Provider value={layout}>
        <LoadingScreen />
        <AuthContext.Provider value={auth}>
          <AuthContext.Consumer>
            {auth => (auth.logged_in ? console.log("logged in") : <Login />)}
          </AuthContext.Consumer>
        </AuthContext.Provider>
      </LayoutContext.Provider>
    );
  }
}

render(<App />, document.getElementById("root"));

登录.js

import React from "react";

class Login extends React.Component {
  render() {
    return (
      <div></div>
    );
  }
}

export default Login;

AuthContext.js

import React from "react";

const AuthContext = React.createContext({
  logged_in: false
});

export default AuthContext;

LayoutContext.js

import React from "react";

const LayoutContext = React.createContext({
  show_loading: false
});

export default LayoutContext;

LoadingScreen.js

import React from "react";
import LayoutContext from "./LayoutContext";

class LoadingScreen extends React.Component {
  render() {
    return (
      <LayoutContext.Consumer>
        {layout =>
          layout.show_loading ? (
            <div id="loading">
              <div id="loading-center">
                <div className="sk-chasing-dots">
                  <div className="sk-child sk-dot1"></div>
                  <div className="sk-child sk-dot2"></div>
                </div>
              </div>
            </div>
          ) : null
        }
      </LayoutContext.Consumer>
    );
  }
}

export default LoadingScreen;

按照这个例子，我从来没有真正理解 this.props(在 App.js 中)如何容纳我的不同上下文。

auth 和 layout 都显示为未定义，this.props 为空，这将导致我的应用程序抛出错误，例如as 无法读取未定义的属性“show_loading”

我立刻喜欢上了 React 文档中提供的示例，但我无法让它工作。

Answer 1

我制作了一个小片段来向您展示如何构建您的上下文提供者和消费者。

在这种情况下，我的 App 组件是应用程序的根。它具有所有提供者，以及每个提供者的值(value)。我不会更改此值，但如果我愿意，我可以。

然后它有一个子组件 MyOutsideComponent，包含所有链接的消费者。有更好的方法可以做到这一点，我只是想一一向您展示链接消费者的工作原理。在实践中，您可以使用一些技巧巧妙地减少这种情况。

这个 MyOutsideComponent 有一个实际的组件，MyComponent，它获取所有上下文元素并将它们的值放在页面上。没什么特别的，重点是展示值是如何传递的。

let FirstContext = React.createContext('first');

let SecondContext = React.createContext('second');

let ThirdContext = React.createContext('third');

let FourthContext = React.createContext('fourth');

let MyComponent = (props) => {
  return (<span >{Object.values(props).join(" ")}</span>);
};

let App = (props) => {
  return (
  <FirstContext.Provider value="this is">
    <SecondContext.Provider value="how you">
      <ThirdContext.Provider value="pass context">
        <FourthContext.Provider value="around">
          <MyOutsideComponent />
        </FourthContext.Provider>
      </ThirdContext.Provider>
    </SecondContext.Provider>
  </FirstContext.Provider>
  );
};

let MyOutsideComponent = () => {
    return ( < FirstContext.Consumer >
          {first =>
            (< SecondContext.Consumer >
             {second =>
               (< ThirdContext.Consumer >
                 {third =>
                   (<FourthContext.Consumer >
                     {fourth =>
                      (<MyComponent first={first} second={second} third={third} fourth={fourth} />)
                     }
                   </FourthContext.Consumer>)
                 }
               </ThirdContext.Consumer>)
             }
           </SecondContext.Consumer>)
         }
       </FirstContext.Consumer>);
   }
   
ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

现在，进行实际的解释。 createContext 为您提供了两个实际组件:Provider 和 Consumer。正如您所发现的，这个 Provider 具有值(value)。 Consumer 将带有一个参数的单个函数作为子函数，该参数是上下文的值。

这是文档有点不清楚的地方，我希望我能提供一点帮助。 这不会在 props 中自动传递，除非 Provider 是组件的直接父级。你必须自己做。因此，在上面的示例中，我链接了四个消费者，然后将它们全部排在我组件的 props 中。

你问过基于类的组件，这就是它最终的样子:

let FirstContext = React.createContext('first');

let SecondContext = React.createContext('second');

let ThirdContext = React.createContext('third');

let FourthContext = React.createContext('fourth');

class MyComponent extends React.Component {
  render() {
    return ( < span > {Object.values(this.props).join(" ")} < /span>);
  }
}

class App extends React.Component {
  render() {
    return (
      <FirstContext.Provider value = "this is" >
        <SecondContext.Provider value = "how you" >
          <ThirdContext.Provider value = "pass context" >
            <FourthContext.Provider value = "around" >
              <MyOutsideComponent / >
            </FourthContext.Provider>
          </ThirdContext.Provider >
        </SecondContext.Provider>
      </FirstContext.Provider >
    );
  }
}

class MyOutsideComponent extends React.Component {
  render() {
    return (
      <FirstContext.Consumer >
        { first => 
          (< SecondContext.Consumer >
            { second =>
              ( < ThirdContext.Consumer >
                {  third =>
                  ( < FourthContext.Consumer >
                    { fourth =>
                      ( < MyComponent first = {first} second={second} third={third} fourth={fourth} />)
                    }
                  </FourthContext.Consumer>)
                }
              </ThirdContext.Consumer>)
            }
          </SecondContext.Consumer>)
        }
      </FirstContext.Consumer>
    );
  }
}
ReactDOM.render( < App / > , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app" />