0

我有以下代码：

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 })}
/>

我找到了一些示例，但它们都在 using React.createClass，我宁愿不使用它，因为 usingconst似乎是为无状态组件做事的新“最佳”方式。

一种可能的解决方案是使用扩展 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）

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

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

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

4

2 回答 2

1

免责声明React Router v4 仍处于 alpha 阶段，其 API 仍在不断变化。根据 v4 的发展方向，这里的任何建议都可能变得毫无意义。

a 渲染的每个组件<Match>都有一些提供给它的道具。它们是location、pattern、params、isExact和pathname。最后三个仅在pattern匹配当前的location.pathname.

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

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

您可以将该组件传递给<Match>then.

<Match
  pattern="/catalog/:id"
  exactly
  component={DefaultRedirect}
/>
于 2016-12-28T16:46:14.150 回答
1

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

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

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

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

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

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

希望这可以帮助！

于 2016-12-28T16:46:15.153 回答