2 回答

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊
我建議對(duì)于您描述的情況(不同級(jí)別的不同組件需要訪問(wèn)某些狀態(tài)并對(duì)其進(jìn)行操作)使用 React context
。您還可以查看狀態(tài)管理器,例如Redux
或MobX
,但在這種特殊情況下,這將是開(kāi)銷(xiāo),因?yàn)槟膽?yīng)用程序不是那么“巨大”?;旧?,您需要?jiǎng)?chuàng)建一些單獨(dú)的文件夾(您可以將其稱為context
),在其中您應(yīng)該創(chuàng)建上下文本身,將其導(dǎo)出并將其包裝在最上層的組件中,以便所有子級(jí)都能夠使用它。
您可以在這里找到一個(gè)示例:https ://codesandbox.io/s/spring-glitter-0vzul 。
這是文檔的鏈接: https: //reactjs.org/docs/context.html
如果您需要,我可以為您提供更多詳細(xì)信息

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊
這是一個(gè)挑戰(zhàn),但我已經(jīng)做到了!布局組件:
state = {
firstMount: false,
clicked: false,
clickedEvt: null
};
clickHandler = (event) => {
console.log('Clikced')
if (this.state.clickedEvt)
this.setState({clicked: false, clickedEvt: null});
else
this.setState({clicked: true, clickedEvt: event.target}, ()=>{setTimeout(() =>
this.setState({clicked: false, clickedEvt: null})
, 50)})
};
<LayoutContext.Provider value={{
clicked: this.state.clicked,
clickedEvt: this.state.clickedEvt,
handleClick: this.clickHandler
}}>
render() {
return(
<div onClick={(event) => this.clickHandler(event)} className="web">
首先,我從布局組件調(diào)用handleClick作為onclick事件,然后從計(jì)算器再次調(diào)用它
componentDidUpdate() {
if (this.context.clicked) {
this.clickRemoveHandler(this.context.clickedEvt)
}
}
添加回答
舉報(bào)