代码之家  ›  专栏  ›  技术社区  ›  Aran Freel

请解释react.js应用程序中上下文的用法

  •  -1
  • Aran Freel  · 技术社区  · 7 年前

    https://github.com/nomadcoders/nomadgram.git

    代码来自 frontend/src/components/footer/index.js 如下所示,其中有行,例如:

    <li className={styles.listItem}>{context.t("About Us")}</li>

    我不明白 context.t("About Us")

    如果您能帮忙,我将不胜感激!!

    import React from "react";
    import PropTypes from "prop-types";
    import styles from "./styles.scss";
    
    const Footer = (props, context) => (
      <footer className={styles.footer}>
        <div className={styles.column}>
          <nav className={styles.nav}>
            <ul className={styles.list}>
              <li className={styles.listItem}>{context.t("About Us")}</li>
              <li className={styles.listItem}>{context.t("Support")}</li>
              <li className={styles.listItem}>{context.t("Blog")}</li>
              <li className={styles.listItem}>{context.t("Press")}</li>
              <li className={styles.listItem}>{context.t("API")}</li>
              <li className={styles.listItem}>{context.t("Jobs")}</li>
              <li className={styles.listItem}>{context.t("Privacy")}</li>
              <li className={styles.listItem}>{context.t("Terms")}</li>
              <li className={styles.listItem}>{context.t("Directory")}</li>
              <li className={styles.listItem}>{context.t("Language")}</li>
            </ul>
          </nav>
        </div>
        <div className={styles.column}>
          <span className={styles.copyright}>© 2017 Nomadgram</span>
        </div>
      </footer>
    );
    
    Footer.contextTypes = {
      t: PropTypes.func.isRequired
    };
    
    export default Footer;
    
    1 回复  |  直到 7 年前
        1
  •  3
  •   Nicholas Tower    7 年前

    组件由两个主要因素驱动:状态和道具。状态是组件内部的,属性由父组件传递。

    但有时,通过一长串组件向下传递道具会比较麻烦,所以还有第三件事可以使用:上下文。上下文允许组件向其子代提供某些数据,而不必确切知道哪些子代需要它。

    所以在组件树的上面,有一个组件看起来像这样,它共享一个名为 t 任何想要它的后代:

    class MyProviderComponent extends React.Component {
      getChildContext() {
        return {
          t: function (key) {
            return 'something something';
          }
        }
      }
    }
    
    MyProviderComponent.childContextTypes = {
      t: PropTypes.func.isRequired
    };
    

    如果我不得不猜测的话 t型 函数可能执行字符串转换。


    current context api here 以及 old api here