Question

我有以下代码：

const CatalogContainer = () => (
    <Match
      pattern="/catalog/:id"
      exactly
      render={({ params }) => (
        <Redirect to={`/catalog/${params.id}/titles`} />
      )}
    />
)

但ESLint因=>引发了以下警告，这是一种不好的做法，因为它在每次调用时都会创建render函数的新引用，我不想要这一点。

警告JSX道具不应该使用箭头函数react / jsx-no-bind

所以，我试图使用一个专门但简单的组件来重构它，如：

const DefaultRedirect = (params) => (
  <Redirect to={`/catalog/${params.id}/titles`} />
);

但是，我很难弄清楚如何使用它。

首先，我认为我需要使用component而不是render属性，但我不太确定，到目前为止我还没有找到关于它的正确文档。（编辑：https://react-router.now.sh/Match 以下是v4的文档）

我尝试了几件事，包括以下内容，但它不起作用。

<Match
  pattern="/catalog/:id"
  exactly
  component={DefaultRedirect({ params })}
/>

我找到了一些示例，但所有这些示例都使用React.createClass，我宁愿不使用它，因为使用const似乎是为无状态组件执行操作的新“最佳”方式。 / p>

一种可能的解决方案是使用扩展React.Component的Class。但感觉不对。（而且ESLint正在显示关于它的错误）

组件应该写成纯函数react/prefer-stateless-function

class DefaultRedirect extends React.Component {
  render() {
    const { params } = this.props;
    return (
      <Redirect to={`/catalog/${params.businessMid}/titles`} />
    );
  }
}

来自render方法的文档：（https://react-router.now.sh/Match）

您可以传入要在位置匹配时调用的函数，而不是为您渲染组件。您的渲染函数将使用传递给组件的相同道具进行调用。 这样可以方便地进行内嵌匹配渲染和包装。

可能方便，但不算是一种好习惯。

有没有办法用纯函数代替呢？

Answer 1

免责声明 React Router v4仍处于alpha状态，其API仍在不断变化。根据v4的方向，这里的任何建议都可能没有实际意义。

由<Match>呈现的每个组件都有一些提供给它的道具。这些是location，pattern，params，isExact和pathname。最后三个仅在pattern与当前location.pathname匹配时提供。

对于将为<Match>呈现的组件，您可以从传递给它的道具中解构params道具。

const DefaultRedirect = ({ params }) => (
  <Redirect to={`/catalog/${params.id}/titles`} />
);

您可以将该组件传递给<Match>然后。

<Match
  pattern="/catalog/:id"
  exactly
  component={DefaultRedirect}
/>

Answer 2

看起来你很近但不完全。

首先，您的专用功能组件应该从道具中解析params：

const DefaultRedirect = ({ params }) => (
  <Redirect to={`/catalog/${params.id}/titles`} />
);

*注意函数参数中的解构。

其次，当您将组件传递给Match时，只需传递引用，如下所示：

<Match
  pattern="/catalog/:id"
  exactly
  component={DefaultRedirect}
/>

希望这有帮助！

react-router v4 - 如何使用“component”属性为纯函数提供参数

2 个答案: