强大的网站设计制作,网站建设主要业务流程设定,如何给网站添加关键词,建设网站需要了解什么这篇文章也可以在我的博客中查看
问题
为什么会有这么奇怪的需求#xff1f;在事情真正发生前真的难说#xff0c;但真遇到一个需要这么做的情况。
最近想做一个网页时钟#xff0c;它的结构如下#xff1a; 时钟#xff08;计算时间#xff0c;组织各个要素#xff…这篇文章也可以在我的博客中查看
问题
为什么会有这么奇怪的需求在事情真正发生前真的难说但真遇到一个需要这么做的情况。
最近想做一个网页时钟它的结构如下 时钟计算时间组织各个要素
|-- 设置面板时间设置
|-- 主题显示时间的样式设置是针对于时钟的比如进制、时区……主题可以不断增加用于花里花哨地改变时钟的输出
但现在我需要为主题也增加设置项加入到设置面板中 因此需要同级传递数据主题-设置面板
解决
改变结构
我也想过改变时钟的结构比如 时钟计算时间组织各个要素
|-- 主题显示时间的样式|-- 设置面板时间设置这样主题、设置面板就是父子关系想要往下传递数据使用一般的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] useStateReactNode();return ClockTheme1 onLoadSettings{setSettingsNode} /ClockSettings themeSettingsNode{settingsNode} //)
}小结
在同级组件之间传递数据无论是简单数值还是复杂元素都需要通过父组件作为跳板
