我对 ReactJS 有点陌生,我正在尝试做一些清理工作。我想知道如何使用新 context api 提供的 props 的扩展属性?<Today />
and <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>
由于两个组件都需要传递相同的 props,因此您可以创建一个对象,然后使用扩展语法将其传递给组件,例如
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)