web-dev-qa-db-ja.com

反応ルーターのリンクを介してオブジェクトを渡す

反応ルータのLinkコンポーネントを介してオブジェクトを渡すことは可能ですか？

何かのようなもの：
<Link to='home' params={{myObj: obj}}> Click </Link>

propsからParentコンポーネントにChildを渡すのと同じ方法で。

それが不可能な場合、これを達成する最良の方法は何ですか：
React + Fluxアプリがあり、テーブルにデータを表示します。行の1つをクリックすると、それが表示されます。いくつかのdetailsこの行のコンポーネント行には必要なデータがすべて揃っているので、Linkに渡すだけでいいと思いました。

もう1つのオプションは、URLの行のidを渡し、それをdetailsコンポーネントで読み取り、IDでストアからデータを要求することです。

上記を達成するための最良の方法は何かわからない...

reactjsreactjs-fluxreact-router
29
knowbody

この質問に対する私の最終的な結論は、適切に考え抜いたことではないということです。 Linkを介してデータを渡すだけで、Childコンポーネントでアクセスできるようになりました。 Colin Ramsay が述べたように、stateにはLinkと呼ばれるものがありますが、そうすることはできません。ユーザーが何かをクリックしてLinkコンポーネントに移動した場合にのみ、データがChildを介して渡されるときに正常に機能します。

問題は、ユーザーがurlで使用されているLinkにアクセスすると、データを取得する方法がないときに発生します。

したがって、私の場合の解決策は、ID paramsでLinkを渡し、次にStoreにデータがあるかどうかを確認することです（ユーザーはLinkを介してアクセスします） Storeからこのデータを取得します。

OrデータがStoreにない場合、actionを呼び出してAPIからデータを取得します。

31
knowbody

いいえ、paramsでオブジェクトを渡すことはできません。したがって、最善の計画はidをストアに渡し、ストアにCHANGEイベントを発行させることです。コンポーネントにストアの情報を照会させる。

12
Hal Helms

リンクを介してオブジェクトを渡すことができます。 paramsではなくクエリ内にデータを追加し、オブジェクトを文字列化します。

<Link to={{ 
  pathname: `/blog/${post.id}`, 
  query: {
    title: post.title, 
    content: post.content,
    comments: JSON.stringify(post.comments)
  } 
}}>Read More...</Link>

次に、子コンポーネントで文字列を解析してオブジェクトに戻します。

JSON.parse(this.props.comments)
8
Pixelomo

これは不可能です。文字列IDなど、URLに保存できるものを渡す必要があります。次に、そのIDを使用してオブジェクトのルックアップを実行します。

3
Colin Ramsay

JSONをシリアル化してから、受信側で逆シリアル化してみてください。

2
praetoriaen