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>都有一些提供给它的道具。它们是locationpatternparamsisExactpathname。最后三个仅在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 回答