0

次のコードがあります。

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

しかし、ESLint は が原因で次の警告をスローしています=>。これは (AFAIK)render呼び出しごとに関数の新しい参照を作成するため、悪い習慣であり、私はそれを望んでいません。

警告 JSX props should not use arrow functions 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

考えられる解決策の 1 つは、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 )

コンポーネントをレンダリングする代わりに、場所が一致したときに呼び出される関数を渡すことができます。render 関数は、コンポーネントに渡されるものと同じ props で呼び出されます。 これにより、便利なインライン マッチのレンダリングとラッピングが可能になります。

便利かもしれませんが、良い習慣とは見なされません。

代わりに純粋な関数を使用してそれを行う方法はありますか?

4

2 に答える 2

1

免責事項React Router v4 はまだアルファ版であり、その API はまだ流動的です。ここでのアドバイスは、v4 の方向性によっては意味がなくなる可能性があります。

によってレンダリングされる各コンポーネントに<Match>は、それに提供されるいくつかの小道具があります。これらはlocation、、、、、およびです。最後の 3 つは、 が現在の と一致する場合にのみ提供されます。patternparamsisExactpathnamepatternlocation.pathname

に対してレンダリングされるコンポーネントの場合、渡された小道具から小道具を分解<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 から params を解析する必要があります。

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

* 関数の引数の分解に注意してください。

次に、コンポーネントをMatch渡して参照を渡す場合は、次のようになります。

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

お役に立てれば！

于 2016-12-28T16:46:15.153 に答える