Question

我正在研究下面的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;

Answer 1

组件受驱动的主要因素有两个：状态和道具。状态在组件内部，而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。您可以详细了解current context api here和old api here

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

1 个答案: