假如有这样一个 NavBar 组件,被 50%以上的页面使用,下面 React 简略代码
interface NavbarProps {
BackAction?: ({ navigation, ...rest }) => JSX.Element
Content?: ({ title, ...rest }) => JSX.Element
Action?: ({ ...rest }) => JSX.Element
title?: string
}
const Navbar = (props:NavbarProps)=>{
const {BackAction = DefaultBackAction, Content = DefaultContent, Action = DefaultAction, title, } = props || {}
return <div className="flex flex-row">
<BackAction {...defaultBackActionProps}>
<Content {...{...defaultContentProps,title}}/>
<Action {...defaultActionProps}/>
</div>
}
// demo
return <Navbar title="title" />
现在你要给这个组件的 title 加一个标题为当前播放音乐主题色的功能,但是只有 1 个页面会用到这个功能
const color = useMusicThemeColor()
1.增加一个 isMusicTheme=true ,然后把 useMusicThemeColor 放在 NavBar 内部
<Navbar title="title" isMusicTheme={true} />
2.override Content ,把 useMusicThemeColor 放当前 page
const color = useMusicThemeColor()
...
<Navbar title="title" Content={({...rest,title})=>{
return <div {...rest} style={{color}}>
{title}
</div>
}} />
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.