小编Kev*_*gia的帖子

使用 React Router v5 时，可以使用useRouteMatch.

const { path } = useRouteMatch();

React Router v6 提供了类似的钩子，useMatch; 然而，这期望收到您想要匹配的模式。

我将使用 React Router v5 钩子通过将当前路径与已知参数相结合来生成路由。

举个例子，如果我在电子商务应用程序的产品页面上（假设/en/product/:id）并且有相关产品的链接（/en/product/1，/en/product/2...等），我以前可以这样做：

const MyComponent = () => {
  const { path } = useRouteMatch();
  return (
    <div>
      <Link to={generatePath(path, { id: 1 })}>Related Product 1</Link>
      <Link to={generatePath(path, { id: 2 })}>Related Product 2</Link>
    </div>
  );
};

由于/en/product来自 API 并且未在代码中的任何位置声明，因此我希望根据当前路径更新 URL。如果用户处于打开状态/es/producto，则链接将自动更新为/es/producto/1。

我在 SO 上看到过建议使用 的解决方案 …

我注意到等待服务工作者使用缓存中的项目进行响应的时间并不像您预期​​的那么快.我和两个人sw-precache以及一个自定义的书面服务工作者看到了相同的等待时间.

这个等待时间的可能原因是什么？我该如何减少它？

我fetch在自定义服务工作者上的事件如下所示:

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                return response;
            }
            return fetch(event.request);
        })
    );
});

我已经设置jest并jest-junit作为记者并遵循了 jest-junit 给出的简单说明。

这包括npm install jest --save-dev和 npm install jest-junit --save-dev

我的package.json样子是这样的（摘录）：

  "devDependencies": { 
    "jest": "^22.4.4",
    "jest-junit": "^4.0.0",
  },
  "scripts": {
    "test": "jest --ci --testResultsProcessor='jest-junit'"
  },
  "jest": {
    "verbose": true,
    "testResultsProcessor": "jest-junit"
  },
  "jest-junit": {
    "suiteName": "Test Suite",
    "output": "./junit.xml"
  }

npm run test在我的机器 (OSX) 上运行时，它运行良好。当它作为 CI 构建过程的一部分或在另一台 Windows 机器上运行时，我收到以下错误：

未找到 testResultsProcessor 选项中的模块“jest-junit”。

当从一个页面导航到另一个页面时,我希望用户自动滚动到顶部,即scrollTo(0, 0).

根据react-router 滚动恢复的文档,推荐的方法是设置一个组件ScrollToTop并将您的路由包装在其中.

虽然这很好用,并且用户可以滚动到嵌套在ScrollToTop组件中的任何路径的顶部,但如果组件放在Switch组件中,Switch则不再像Switch那样起作用; 意味着它将渲染它匹配的所有路由而不是第一个路由.

或者,放置它的ScrollToTop外部Switch,它不再滚动用户到顶部.

版: react-router-v4

在通用 ReactJS 中，我有意根据内容是由浏览器还是服务器呈现来呈现不同的输出，以便能够相应地创建不同的控件。这是使用 完成的exenv，例如：

<section>
  {ExecutionEnvironment.canUseDOM && (
    <div class="my-super-js-control"></div>
  )}
  {!ExecutionEnvironment.canUseDOM && (
  <span>Please enable JavaScript if you want the super JS control</span>
  )}
</section>

这很有效并且结果如预期，但是我在控制台中收到警告：

Warning: Expected server HTML to contain a matching <div> in <section>.

根据我的理解，hydratingReact 似乎将来自服务器的输出 HTML 字符串与将在客户端生成的字符串进行比较。

在大多数情况下，这些将是相同的，但是在这种情况下，我故意想要不同的输出。实现这一点的正确方法是什么？

我最近加入了React&Redux生态系统; 虽然我可以欣赏React提供的组件之间的清晰组织(以及更多)和Redux的三个原则; 我发现很难决定什么是最好的发展方式; 面向对象还是功能？

在React/Redux之前,我们习惯使用ES6类开发; 它为面向对象的编程提供了非常整洁的语法,尤其是继承.构建在以下简单结构上的所有组件类:

export default class MyComponent extends React.Component {
    constructor(){
        // initialise state here
    }

    componentWillMount(){
        // populate state here
    }

    componentDidMount(){
        // update UI/bind listeners here
    }

    render(){
        // output HTML here
    }
}

在引入Redux之后,我开始觉得上面的结构不再是我所追求的,因为组件不再保持自己的状态; 但相反,状态来自Redux商店并使用该connect方法作为道具传递mapStateToProps.与不可变数据的概念一起,这似乎有利于函数式编程方法,其中所有函数都是一流函数.上面的组件现在看起来像:

const MyComponent = ({ myPropA, onEvent }) => {
    // output HTML here
}

const mapStateToProps = state => {
    return {
        myPropA: state.myPropA
   }
}

const mapDispatchToProps = dispatch => {
    return {
        onEvent: …

运行 jest 时，如果函数使用performance.getEntries(或performance.getEntriesByName)，则测试会引发异常：

performance.getEntries is not a function

如何让我的测试继续运行而不崩溃？

根据文档，performance.getEntries已从perf_hooksNodeJS v10.0.0 ( https://github.com/nodejs/node/pull/19563 ) 中删除，并且可以使用以下方式实现相同的功能

const measures = []
const obs = new PerformanceObserver(list => {
  measures.push(...list.getEntries())
  obs.disconnect()
})
obs.observe({entryTypes: ['measure']})
function getEntriesByType(name) {
  return measures
}

然而，上述解决方案仅在直接在 NodeJS 应用程序中工作时才可行，而不是在运行测试时可行，因为我不想更改我的实现。我尝试过嘲笑performance.getEntries作为全局变量setupAfterEnv，就像我对其他全局变量所做的那样。例如：

global.performance = {
  getEntries: () => []
}

但是，在调试时，性能始终等于{}（同时performance.now()运行良好。我相信这是默认值jsdom（这是我的testEnvironment）。

根据developers.google.com，可以推迟Web应用程序安装横幅，但我只能完全取消它。

window.addEventListener('beforeinstallprompt', function(e) {
  console.log('beforeinstallprompt Event fired');
  e.preventDefault();
  return false;
});

一种用例是将提示推迟到页面生命周期的后期，例如在用户执行操作后，或点击页面底部（表明他们正在与您的网站互动）。

如何推迟网络应用横幅？

我有一个manifest.json根据MDN 规范，，虽然它在从移动设备浏览网站时正常工作（添加到主屏幕弹出窗口，主题颜色和图标加载...等）Chrome Dev Tools 无法解析它. Lighthouse (chrome 扩展) 上仍然存在同样的问题。

有没有人见过类似的问题？我认为 JSON 是无效的，但是将其复制粘贴到Web App Validator 中它被标记为正确，但是在输入 URL 时它会给出解析错误：

File isn't valid JSON: SyntaxError: Unexpected token in JSON at position 0