时间戳

首页 > 解决方案 > 请解释 react.js 应用中上下文的使用

javascript - 请解释 react.js 应用中上下文的使用

问题描述

我正在研究下面的 nomadgram 应用程序的前端代码。. .

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;

标签： javascriptreactjs

解决方案

组件由两个主要驱动因素：状态和道具。state 在组件内部，props 由父组件向下传递。

但有时通过一长串组件向下传递 props 可能会很麻烦，因此可以使用第三个东西：上下文。上下文允许组件为其后代提供一些数据，而无需确切知道哪些后代需要它。

所以在组件树更高的地方，有一个看起来像这样的组件，并且正在t与任何想要它的后代共享一个命名的函数：

class MyProviderComponent extends React.Component {
  getChildContext() {
    return {
      t: function (key) {
        return 'something something';
      }
    }
  }
}

MyProviderComponent.childContextTypes = {
  t: PropTypes.func.isRequired
};

如果我不得不猜测，真正的t函数可能会进行字符串翻译。

请注意，您的代码和我添加的代码使用的是旧的上下文 api。在 React 16 中，他们引入了一个新的上下文 api。您可以在此处阅读有关当前上下文 api和旧 api的更多信息

推荐阅读