こちらの記事を参考に、ルーティング先の component に Props を渡そうと考えています。
具体的には、<Route />
で表示するコンポーネントを指定する際に、“component” ではなく “render”を使うことで対応しようと考えているのですが、なぜか上手くいきません。。
実際のコード
<SectionMain />
のpropsを、<Page />
に引き継ぎたいです。
react.js
1class App extends React.Component { 2 constructor(props) { 3 super(props); 4 this.handleDateChange = this.handleDateChange.bind(this); 5 this.state = {date: ''}; 6 } 7 8 handleDateChange(e) { 9 this.setState({date: e }); 10 } 11 12 render() { 13 const date = this.state.date; 14 return ( 15 <div className={css(styles.app)}> 16 <div className={css(styles.header)}> 17 <SectionHeader date={date} onDateChange={this.handleDateChange} /> 18 </div> 19 <div className={css(styles.main)}> 20 <SectionMain date={date} /> 21 </div> 22 </div> 23 ); 24 } 25}
react.js
1const SectionMain = (props) => { 2 return ( 3 <div className={css(styles.contents)}> 4 <Route exact path='/' render={props => <Page {...props} />} /> 5 <Route path='/room' component={inRoom} /> 6 <Route path='/friends' component={inFriends} /> 7 </div> 8 ); 9}
#状況
表示するだけなら、特にエラーが出ることもないです。
また、dateのstateが変更されると、<SectionHeader />
とその子コンポーネント、および<SectionMain />
のpropsが正常に変更されていることは、Googleのdevツールで確認済みです。
<Page />
以下にのみ、正しく受け渡すことができていません。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー