這篇文章也可以在我的博客中查看

問題

為什么會有這么奇怪的需求？在事情真正發(fā)生前真的難說，但真遇到一個需要這么做的情況。

最近想做一個網(wǎng)頁時鐘，它的結(jié)構(gòu)如下：

+ 時鐘（計算時間，組織各個要素）
|--+ 設(shè)置面板（時間設(shè)置）
|--+ 主題（顯示時間的樣式）

1. 設(shè)置是針對于時鐘的，比如：進制、時區(qū)……
2. 主題可以不斷增加，用于花里花哨地改變時鐘的輸出

但現(xiàn)在我需要為主題也增加設(shè)置項，加入到設(shè)置面板中
因此需要同級傳遞數(shù)據(jù)（主題->設(shè)置面板）

解決

改變結(jié)構(gòu)

我也想過改變時鐘的結(jié)構(gòu)，比如：

+ 時鐘（計算時間，組織各個要素）
|--+ 主題（顯示時間的樣式）|--+ 設(shè)置面板（時間設(shè)置）

這樣主題、設(shè)置面板就是父子關(guān)系，想要往下傳遞數(shù)據(jù)使用一般的props屬性就可以

但是我的設(shè)置面板本身是針對時鐘的，也就是無論主題怎么更變，設(shè)置面板的總體樣式都是不變的。
也就是，我布局設(shè)置面板，不需要主題的參與

雖然這么做是可以解決問題的，但針對這個案例：
我左思右想，最后還是認為：設(shè)置面板的父元素應該是時鐘，而不是主題

父組件中介

先總結(jié)一下，各種流向信息在React中的傳遞方法是：

1. 自上而下：向Props屬性傳入值
2. 自下而上：向Props屬性傳入setState函數(shù)回調(diào)
3. 全局：Context
4. 同級：???

好吧。顯然，最直截了當?shù)姆椒ㄊ?#xff1a;把同級看做是一個“自下而上而下”操作

設(shè)置面板

子組件ClockSettings中，定義可插入的ReactNode元素插槽：

interface IClockSettingsProps {themeSettingsNode?: ReactNode,
}export default function ClockSettings({ ...props }: IClockSettingsProps) {return (<div>{props.themeSettingsNode}</div>)
}

主題

首次渲染時調(diào)用onLoadSettings，傳出該主題的設(shè)置項元素（ReactNode）：

interface IClockProps {onLoadSettings?: (value: ReactNode) => void,
}export default function ClockTheme1({ ...props }: IClockProps) {useEffect(() => {props.onLoadSettings?.(<div>{/* input element maybe... */}</div>)}, []);
}

父元素

最后，在父元素（時鐘）里，組合數(shù)據(jù)的傳遞：

export default function Clock() {const [settingsNode, setSettingsNode] = useState<ReactNode>();return <><ClockTheme1 onLoadSettings={setSettingsNode} /><ClockSettings themeSettingsNode={settingsNode} /></>)
}

小結(jié)

在同級組件之間傳遞數(shù)據(jù)，無論是簡單數(shù)值還是復雜元素，都需要通過父組件作為跳板