レイアウトコンポーネントでpropsとinvokeアクションを渡したいと思います。私が次のコードでそれをしようとすると、初期状態だけが渡されます。還元店の変更は反映されません。反応ルータreduxのレイアウトコンポーネントにストアを渡しますか?
これは、アプリを起動するためのコードです。
ReactDOM.render(
<AppContainer>
<Provider store={ store }>
<ConnectedRouter history={ history } >
<Layout prop={store.getState()}>
<Route exact path='/' component={ Dashboard } />
<Route path='/workorder' component={ WorkOrder } />
<Route path='/programs' component={ Programs } />
<Route path='/departments' component={ Departments } />
<Route path='/users' component={ Users } />
<Route path='/fetchdata/:startDateIndex?' component={ FetchData } />
</Layout>
</ConnectedRouter>
</Provider>
</AppContainer>,
document.getElementById('react-app')
);
これはレイアウトページのコードです。
interface LayoutProps{
prop: any;
}
export class Layout extends React.Component<LayoutProps, {}> {
public render() {
console.log(this.props);
return <div>
<Header/>
<div id="wrapper">
<NavMenu/>
{ this.props.children }
</div>
</div>;
}
}
コンソールログは、常に初期状態のみを表示します。なぜ更新されていないのか分かりません。私はレイアウトのためだけにこの問題があります。ルートに定義されている他のすべてのコンポーネントは、 'connect'を使用して接続され、正しく動作します。
編集:これは、更新されたコードです:
ReactDOM.render(
<AppContainer>
<Provider store={ store }>
<ConnectedRouter history={ history } >
<Layout>
<Route exact path='/' component={ Dashboard } />
<Route path='/workorder' component={ WorkOrder } />
<Route path='/programs' component={ Programs } />
<Route path='/departments' component={ Departments } />
<Route path='/users' component={ Users } />
<Route path='/fetchdata/:startDateIndex?' component={ FetchData } />
</Layout>
</ConnectedRouter>
</Provider>
</AppContainer>,
document.getElementById('react-app')
);
これは、レイアウトのコードです:
export class Layout extends React.Component<any, {}> {
public render() {
console.log(this.props);
return <div>
<Header/>
<div id="wrapper">
<NavMenu/>
{ this.props.children }
</div>
</div>;
}
}
export default connect(
(state: ApplicationState) => state.users, // Selects which state properties are merged into the component's props
UsersStore.actionCreators.getCurrentUser // Selects which action creators are merged into the component's props
)(Layout) as typeof Layout;
しかし、唯一のprops.childrenは、レイアウト・コンポーネントの内側に用意されています。私がstate.users、UsersStore.actionCreators.getCurrentUserを渡しても、他のすべての小道具は未定義です。基本的には、(すべての再レンダリングの後でさえ)レデックスストアから何も取っていません。
ためhereを参照してください更新質問を参照してください。私はレイアウトを接続しようとしました。しかし、すべての小道具は私が推測するルータから来るprops.childrenを除いて未定義です。私はここであなたの答えを見ました(助けなかった)。 https://stackoverflow.com/questions/43502291/typescript-redux-exclude-redux-props-in-parent-component –