团购网站设计2022年新闻热点摘抄
这篇文章也可以在我的博客中查看
问题
为什么会有这么奇怪的需求？在事情真正发生前真的难说，但真遇到一个需要这么做的情况。
最近想做一个网页时钟，它的结构如下：
+ 时钟（计算时间，组织各个要素）
|--+ 设置面板（时间设置）
|--+ 主题（显示时间的样式）
- 设置是针对于时钟的，比如：进制、时区……
- 主题可以不断增加，用于花里花哨地改变时钟的输出
但现在我需要为主题也增加设置项，加入到设置面板中
因此需要同级传递数据（主题->设置面板）
解决
改变结构
我也想过改变时钟的结构，比如：
+ 时钟（计算时间，组织各个要素）
|--+ 主题（显示时间的样式）|--+ 设置面板（时间设置）
这样主题、设置面板就是父子关系，想要往下传递数据使用一般的props属性就可以
但是我的设置面板本身是针对时钟的，也就是无论主题怎么更变，设置面板的总体样式都是不变的。
也就是，我布局设置面板，不需要主题的参与
虽然这么做是可以解决问题的，但针对这个案例：
我左思右想，最后还是认为：设置面板的父元素应该是时钟，而不是主题
父组件中介
先总结一下，各种流向信息在React中的传递方法是：
- 自上而下：向Props属性传入值
- 自下而上：向Props属性传入setState函数回调
- 全局：Context
- 同级：???
好吧。显然，最直截了当的方法是：把同级看做是一个“自下而上而下”操作
设置面板
子组件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} /></>)
}
小结
在同级组件之间传递数据，无论是简单数值还是复杂元素，都需要通过父组件作为跳板