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

18 小时 4 分钟前
 zhengfan2016

假如有这样一个 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>
 }} />
673 次点击
所在节点    程序员
10 条回复
chenliangngng
17 小时 35 分钟前
你可以把组件套一层壳,然后加上你要的功能,不当公共组件
shintendo
17 小时 32 分钟前
不能让 title 可以接受 JSX.Element 吗
zhengfan2016
17 小时 26 分钟前
@shintendo 建议您阅读一下代码里 Content 组件,思考为什么 Content 组件会接收 Navbar 传过来的 title🤔
shintendo
17 小时 0 分钟前
@zhengfan2016 确实,没仔细看。我选择加个 titleStyle
llwxi
16 小时 46 分钟前
先用第二种实现,后续如果有两个组件使用到了,封装一个<MusicThemeColorText>{title}</MusicThemeColorText> 之类的组件?
zhengfan2016
16 小时 42 分钟前
@llwxi 没错,这就是我想看到的答案。

但是就我观察大部分前端喜欢用 1 的写法,特别是用 1 的写法来改我的代码,把整个组件改的很臃肿,让我很不爽。
zb1141920796
16 小时 25 分钟前
图省事就用 1 ,图可扩展性强一点就用 2,
snowlee
3 小时 41 分钟前
我会把 title 变成 reactNode, 相传啥就传啥
lisongeee
2 小时 18 分钟前
没看懂你的操作,内部直接用 css 变量不行吗?

然后直接在目标页面给 body 设置 css 变量,离开后移除此变量
monologue520
23 分钟前
1.设 flag 控制,如果确定只有一个页面发生变化未尝不可,比较直观简单
2.增加了组件拓展性,控制当前页的颜色,还有其他的页的 title 默认颜色,可以抽离一个 Title 组件维护 color 属性
3.使用样式变量,比如 cssinjs 写法中「 const color = useMusicThemeColor()」传递一个 props 给 title 样式,最简单方便
我个人选 3
(用不着不爽,沟通一下就可以了)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1085434

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX