如何在react/next.js app中的同级组件间传递数据

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

问题

为什么会有这么奇怪的需求？在事情真正发生前真的难说，但真遇到一个需要这么做的情况。

最近想做一个网页时钟，它的结构如下：

+ 时钟（计算时间，组织各个要素）
|--+ 设置面板（时间设置）
|--+ 主题（显示时间的样式）

1. 设置是针对于时钟的，比如：进制、时区……
2. 主题可以不断增加，用于花里花哨地改变时钟的输出

但现在我需要为主题也增加设置项，加入到设置面板中
因此需要同级传递数据（主题->设置面板）

解决

改变结构

我也想过改变时钟的结构，比如：

+ 时钟（计算时间，组织各个要素）
|--+ 主题（显示时间的样式）|--+ 设置面板（时间设置）

这样主题、设置面板就是父子关系，想要往下传递数据使用一般的props属性就可以

但是我的设置面板本身是针对时钟的，也就是无论主题怎么更变，设置面板的总体样式都是不变的。
也就是，我布局设置面板，不需要主题的参与

虽然这么做是可以解决问题的，但针对这个案例：
我左思右想，最后还是认为：设置面板的父元素应该是时钟，而不是主题

父组件中介

先总结一下，各种流向信息在React中的传递方法是：

1. 自上而下：向Props属性传入值
2. 自下而上：向Props属性传入setState函数回调
3. 全局：Context
4. 同级：???

好吧。显然，最直截了当的方法是：把同级看做是一个“自下而上而下”操作

设置面板

子组件ClockSettings中，定义可插入的ReactNode元素插槽：

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

主题

首次渲染时调用onLoadSettings，传出该主题的设置项元素（ReactNode）：

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

父元素

最后，在父元素（时钟）里，组合数据的传递：

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

小结

在同级组件之间传递数据，无论是简单数值还是复杂元素，都需要通过父组件作为跳板