小编Flo*_*elt的帖子

我想在我的公共布局中渲染我的一些路线,以及我的私人布局中的其他一些路线,是否有一个干净的方法来做到这一点？

示例显然不起作用,但我希望大致解释我正在寻找的内容:

<Router>

  <PublicLayout>
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/about" component={AboutPage} />
    </Switch>
  </PublicLayout>

  <PrivateLayout>
    <Switch>
      <Route exact path="/profile" component={ProfilePage} />
      <Route exact path="/dashboard" component={DashboardPage} />
    </Switch>
  </PrivateLayout>

</Router>

我想要切换某些路由的布局,如何使用新的路由器做到这一点？

嵌套路由不再有效,并给我这个错误:

You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

编辑:布局包装整个路径组也意味着只要您保留在同一个私有/公共路由组中,这些布局只会呈现一次.如果您的布局必须从您的服务器获取某些内容,这是一个大问题,因为如果您使用布局包装每个页面,那么每次更改都会发生这种情况.

使用时react-loadable，这些异步组件中引发的错误（例如错误的导入）不会轻易提醒您。

我希望能够在开发环境中禁用react-loadable（绕过它，并同步加载所有内容）并在生产环境中启用它，但是我不知道如何重写react-loadable来完成这项工作：

import Loadable from 'react-loadable';
import LoadingComponent from './Loading';

// My reused loadable component everywhere
// In production
export default options =>
  Loadable({
  loading: LoadingComponent,
  delay: 200,
  ...options,
});

// Ideally a dev version that skips loadable
// In development, without any async import
export default options => options.loader(); // Does not work

有没有办法做到这一点？

我想在悬停时更改Material-UI RaisedButton的样式,但似乎没有特定的选项可以做到这一点,因为悬停时发生的事情是由材料设计指南定义的.

然而,有什么方法可以在悬停在按钮上时更改按钮的样式(主要是颜色和背景颜色)吗？

我看到m-ui为它们的按钮使用了很多不同的层,并且当前在按钮顶部添加了一个白色透明背景,以便它可以很好地适应所有主题颜色.

(更确切地说,我想反转颜色和背景颜色之间的颜色.)

我想知道为什么font-size在 HTML 上设置CSS 属性会input自动增加其宽度？

我明白为什么它会增加高度，但我希望input在更改font-size.

我问的原因是因为它破坏了我正在构建的 flex 布局，其中有一个input. 当我增加字体大小时，input完全脱离了布局。

这是一个（反应）再现：

<div
  style={{
    backgroundColor: 'blue',
    display: 'flex',
    flexDirection: 'column',
    maxWidth: 400,
    padding: 20,
    alignItems: 'center',
  }}
>
  <div style={{ display: 'flex' }}>
    <span>Some text</span>
    <input style={{ 'font-size': 20 }} />{' '}
  </div>

  <div style={{ display: 'flex' }}>
    <span>Some text</span>
    <input style={{ 'font-size': 50 }} />
  </div>
</div>

有没有干净的方法来解决这个问题？

我正在尝试在 VSCode 正则表达式搜索中匹配文件的开头以查找并删除以下模式：

//
Anything else to leave in place
etc.

我想删除所有包含//\n第一个字符的文件中的第一行。但是，当我执行正则表达式搜索时，//\n它显然会匹配所有文件中的所有出现，无论它们在文件中的位置如何。

正则表达式语言\A在某些编辑器中提到匹配行或文件的开头的存在，但 VSCode 拒绝此正则表达式为无效：\A//\n。

所以我的问题是，如何在 VSCode 中匹配文件的开头来实现我所需要的？

有没有一种快速的方法来做这样的事情：

cf delete *-failed

删除所有以-failed?结尾的应用程序

我试图了解如何最好地测试 react-router 的行为是否符合@testing-library/react 的预期。

我能想到的最简单的测试是验证单击链接是否会更改 URL。我知道理想情况下我应该测试单击链接会呈现一个新组件，但这会为测试增加很多样板。

所以这是我失败的例子：

import { MemoryRouter } from 'react-router-dom';
import { render } from '@testing-library/react';
import { createMemoryHistory } from 'history';

it('routes to a new route', async () => {
  const history = createMemoryHistory();
  const { getByText } = render(
    <MemoryRouter history={history}>
      <Link to="/hello">Click me</Link>
    </MemoryRouter>
  );

  fireEvent.click(getByText('Click me'));
  await waitFor(() => expect(history.location.pathname).to.equal('/hello')); // Fails
});