react-router v4 - 如何使用“组件”属性为纯函数提供参数答案

【问题标题】：react-router v4 - How to provide params to a pure function using "component" attributereact-router v4 - 如何使用“组件”属性为纯函数提供参数
【发布时间】：2017-05-12 19:07:40
【问题描述】：

我有以下代码：

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

但是由于=>，ESLint 会抛出以下警告，这是 (AFAIK) 一种不好的做法，因为它会在每次调用时创建 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 似乎是为无状态组件做事的新“最佳”方式。

一种可能的解决方案是使用扩展 React.Component 的类。但是感觉不对。（并且 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)

您可以传入一个在位置匹配时调用的函数，而不是为您呈现一个组件。将使用传递给组件的相同道具调用您的渲染函数。 这允许方便的内联匹配渲染和包装。

也许方便，但不被认为是一种好的做法。

有没有办法使用纯函数来代替？

【问题讨论】：

标签： reactjs react-router jsx react-router-component react-router-v4

【解决方案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}
/>

【讨论】：

【解决方案2】：

看起来你很接近但不完全。

首先，您的专用功能组件应该像这样从 props 中解析参数：

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

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

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

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

希望这会有所帮助！

【讨论】：