[解決済み] react-reduxコンテナコンポーネントへのpropsの受け渡し
2023-05-11 08:44:41
質問
React-Reduxのコンテナコンポーネントがあり、React Nativeのナビゲータコンポーネント内に作成されています。私はナビゲータをこのコンテナコンポーネントにpropとして渡すことができるようにしたいので、その提示コンポーネント内でボタンが押された後、それはナビゲータスタックにオブジェクトをプッシュすることができます。
私は、react-reduxコンテナコンポーネントが与えてくれる定型的なコードをすべて手書きする必要なしにこれを行いたいと思います(そして、react-reduxがここでも与えてくれるすべての最適化を見逃すことはありません)。
コンテナコンポーネントのコード例です。
const mapStateToProps = (state) => {
return {
prop1: state.prop1,
prop2: state.prop2
}
}
const mapDispatchToProps = (dispatch) => {
return {
onSearchPressed: (e) => {
dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator
}
}
}
const SearchViewContainer = connect(
mapStateToProps,
mapDispatchToProps
)(SearchView)
export default SearchViewContainer
そして、ナビゲータからこのようなコンポーネントを呼び出せるようにしたいと思います。
renderScene
関数から呼び出すことができます。
<SearchViewContainer navigator={navigator}/>
上のコンテナのコードでは、この渡されたプロップに
mapDispatchToProps
関数の中からこの渡されたプロップにアクセスできるようにする必要があります。
ナビゲータをreduxステートオブジェクトに格納するのは気が進みませんし、propをプレゼンテーショナルコンポーネントに渡したくありません。
このコンテナコンポーネントにpropを渡すことができる方法はありますか?あるいは、私が見落としている代替のアプローチはありますか?
ありがとうございます。
どのように解決するのですか?
mapStateToProps
そして
mapDispatchToProps
はどちらも
ownProps
を第二引数として取ります。
[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):
について 参照
関連
-
[解決済み] useStateプロパティのフックにmap関数を使用する方法
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] ReactコンポーネントのJest SnapshotテストにおけるSnapshotテストの仕組みとtoMatchSnapshot()関数は何をするのか?
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] Reduxのアクションをタイムアウトでディスパッチする方法とは?
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
-
[解決済み] mapDispatchToPropsとは何ですか?
-
[解決済み] react-router - ハンドラコンポーネントにpropsを渡す
-
[解決済み] ReduxのmapToDispatchToProps()の引数で「dispatch」が関数でない件
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] React テキストを挟んだ横長の仕切りを作る
-
[解決済み] バベルエラーです。JSX値は、式または引用されたJSXテキストのいずれかである必要があります。
-
[解決済み] マテリアルUIセレクトフィールドのマルチセレクト
-
[解決済み] material-ui-pickers KeyboardDatePicker をモーメントで使用するには?
-
[解決済み] Webpack + Babelです。プリセット "es2015 "がディレクトリに相対して見つからなかった
-
[解決済み] Webpack のコンパイルに失敗した
-
React はエラー TypeError を報告します。未定義のプロパティ 'XX' を読み取ることができない、問題は解決されました。
-
[解決済み] Static HTML elements with event handlers require a role." を修正するにはどうすればよいですか?
-
[解決済み] React QueryとReduxの主な違いは何ですか?
-
[解決済み] Reactプロジェクトに.envファイルを追加する