問題タブ [react-router-component]

reactjsでルーターを使用すると、この警告が表示されます。

警告: prop onのReact.PropTypes検証関数を手動で呼び出しています。これは推奨されておらず、次のメジャー バージョンでは動作しません。pathRoute

v4 ドキュメントで提供されているアニメーション遷移の例は、同じコンポーネントのフェードインとフェードアウト、および背景色の調整を示しているため、少し複雑に思えます。

この手法を、あるコンポーネントをフェードアウトして別のコンポーネントをフェードインするより現実的な例に適用しようとしていますが、適切に機能させることはできません (最初のコンポーネントのみがフェードアウトし、2 つ目のコンポーネントがポップするようです)。であり、このトランジションは一方向にしか機能しません ([戻る] ボタンではトランジションは発生しません)。

これは私のコードでMatchWithFade、例からの削除されたバージョンを使用しています:

この質問はこれとほぼ同じですが、実際には質問に答えていない受け入れられた回答があります。

次のコードがあります。

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

警告 JSX props should not use arrow functions react/jsx-no-bind

したがって、次のような専用のシンプルなコンポーネントを使用して、これをリファクタリングしようとしています。

でも、使い方が分からなくて困っています。

componentまず、属性の代わりに使用する必要があると思いますrenderが、よくわかりませんし、これに関する適切なドキュメントもまだ見つかりません。(編集: https://react-router.now.sh/Match ここに v4 のドキュメントがあります)

以下を含むいくつかのことを試しましたが、うまくいきません。

いくつかの例を見つけましたが、それらはすべて を使用しています。これは、ステートレス コンポーネントに対して何かを行うための新しい「最良の」方法であるように見えるためReact.createClass、むしろ使用したくありません。const

考えられる解決策の 1 つは、React.Component を拡張する Class を使用することです。しかし、それは間違っていると感じています。（そしてESLintはそれに関するエラーを表示しています）

コンポーネントは純粋な関数として記述する必要があります react/prefer-stateless-function

メソッドに関するドキュメントからrender: ( https://react-router.now.sh/Match )

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

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

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