拆分成更小的组件便于复用 麻烦老师帮忙看看是否正确

Question

老师 接之前关于属性取舍的问题 我把<li>从<ul>里拆分出来作为一个单独的Tab组件 下面是我的代码 本机上运行没有问题 希望老师帮忙看下有没有更优化的做法？ 谢谢！补充：图片需要点击一下才可以看到完整版本。。

Answer 1

张轩 2019-07-15 16:20:17

同学 谢谢你的思考和优化，很不错的完成。之前我们讨论的点是组件应该更抽象，还是更具象。

我觉得作为我本人，如果让组件更抽象的话，可能会考虑一下几个优化的点。

1，Tab 组件中 onTabChange 没有被触发，这个应该加上

2, 我们现在是抽取一个更加抽象，更加和项目无关的组件，所以我们不妨更抽象一些，现在 Tab 内内容自定义程度还是比较低，我在想把要显示的作为它的 children 是否更妙？

<Tab>
   <p>这里面可以是任何 jsx 结构</p>
</Tab>

3，现在既然有单个的Tab，那么肯定是有外围的控制 Tabs，为了更好的重用，我觉得把整体的 Tabs 作为一个整体给别人用，会感觉更容易使用。

<Tabs>
    <Tab>This is Tab one</Tab>
    <Tab>This is Tab 2!</Tab>
    ...
</Tabs>

 

• 提问者 ywang04 #1

  老师 没能完全明白你的意思 以下是我的疑惑的地方:
  1. 似乎你不太赞同将Tabs以TabList的形式渲染出来？因为你是想整体提供<Tabs>给别人用 那么里面的Tab就是根据自己的实际情况手动添加而不是通过map循环显示出来？
  2. <Tab>
     <p>这里面可以是任何 jsx 结构</p>
     </Tab>
  这里面可以放任何JSX的结构 我目前写的就是将整个<li>标签放进去了。也不太理解你说的自定义程度比较低如何体现？如果老师方便的话 是否可以贴一些完整的代码能够展现出你的意图 这样可以提高咱们沟通的效率 也节约你的时间。再次谢谢！

• 张轩 回复 提问者 ywang04 #2

  同学你好欧，我的意思是这样滴，对于本项目，我觉得你的优化非常好！你把 Tab 从 ViewTab 里面拆出来 做的很好，这样添加新的 Tab 就方便很多。所以我觉得挺完美。
  
  我上面的回答接下来是发散性思维哈，对于本项目其实不必要这么做，但是如果你想把这个组件做的更通用的话，（比如作为一个 Tabs 组件，拿到别的项目里面去用），你可以考虑我上面的点，去试着做一做哈。

• 提问者 ywang04 回复 张轩 #3

  现在回过头来看老师的回复 已经可以理解了。谢谢