我是reactjs的新手,正在尝试做一些清理工作。我想知道如何将扩展属性用于新上下文API提供的道具?<Today />而且<All />基本上会使用相同的道具,我认为它看起来很混乱。
<Today />
<All />
这是我要清理的行:
<ResultsProvider> <ResultsContext.Consumer> {(val) => ( <Switch> <Route exact path={'/'} render={ (props) => <Today results={val.results} loading={val.loading} viewTicket={val.viewTicket} formatStatus={val.formatStatus} fetchData={val.fetchData} formatDate={val.formatDate} sortResults={val.sortResults} formatTitle={val.formatTitle} /> }/> <Route path={'/week'} component={Week} /> <Route path={'/all'} render={ (props) => <All results={val.results} loading={val.loading} viewTicket={val.viewTicket} formatStatus={val.formatStatus} fetchData={val.fetchData} formatDate={val.formatDate} sortResults={val.sortResults} formatTitle={val.formatTitle} /> }/> </Switch> )} </ResultsContext.Consumer> </ResultsProvider>
由于两个组件都需要传递相同的道具,因此您可以创建一个对象,然后使用扩展语法将其传递给组件
<ResultsProvider> <ResultsContext.Consumer> {(val) => { const customProps = { results: val.results, loading: val.loading, viewTicket: val.viewTicket, formatStatus: val.formatStatus, fetchData: val.fetchData, formatDate: val.formatDate, sortResults: val.sortResults, formatTitle: val.formatTitle } return <Switch> <Route exact path={'/'} render={ (props) => <Today {...props} {...customProps} /> }/> <Route path={'/week'} component={Week} /> <Route path={'/all'} render={ (props) => <All {...props} {...customProps} /> }/> </Switch> }} </ResultsContext.Consumer> </ResultsProvider>