前端问题，假如为一个被很多地方用的基层组件加新功能，你会怎么做

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

假如有这样一个 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>
 }} />

9 条回复 • 2024-11-01 10:18:22 +08:00