我有点新的反应,我试图做一些清理工作。我想知道如何使用新上下文api提供的道具的spread属性? <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>
答案 0 :(得分:4)
由于两个组件都需要传递相同的道具,您可以创建一个对象,然后使用扩展语法将其传递给组件,如
<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>