从常规函数访问React上下文

时间:2019-02-08 11:05:47

标签: javascript reactjs react-context

是否可以通过非React助手功能访问React上下文?

例如,我有一个上下文提供程序,可在加载应用程序时为案例研究页面保存根子弹。然后,我需要构建URL,并在应用程序周围的各个地方使用上下文提供程序。为此,我创建了一个辅助函数:

components / caseStudies / index.jsx

import getCaseStudyPath from '../../lib/helpers/getCaseStudyPath';

const CaseStudies = ({ caseStudy }) => {
  // caseStudy.slug === 'test-case-study'
  const caseStudyPath = getCaseStudyPath(caseStudy.slug);

  return (
    <a href={caseStudyPath}>Test</a>
  );
};

lib / helpers / getCaseStudySlug

export default (slug) => {
  // Get caseStudyRootSlug from React context
  return `/${caseStudyRootSlug}/${slug}`;
  // For example, this returns '/case-studies/test-case-study'
};

我知道我可以只在我的React组件中使用上下文提供者,甚至可以将其用作HOC,并将值传递给helper函数,但是我需要在我的整个应用程序中使用此helper函数,并且不需要每次我想使用它时都要建立一个消费者的开销。

0 个答案:

没有答案