用React实现点击切换的标签页

最新推荐文章于 2024-05-26 12:21:33 发布

shooter32

最新推荐文章于 2024-05-26 12:21:33 发布

阅读量1.1w

点赞数 2

分类专栏： React 文章标签： React 标签标签页组件化

本文链接：https://blog.csdn.net/shooter32/article/details/50366457

版权

一、首先是Showcase

height="268" width="420" scrolling="no" src="//codepen.io/charleyw/embed/KVgNeK/?height=268&theme-id=0&default-tab=result" allowfullscreen="true">See the Pen <a href="http://codepen.io/charleyw/pen/KVgNeK/">http://codepen.io/charleyw/pen/KVgNeK/</a>‘>react-tabs by Wang Chao (<a href="http://codepen.io/charleyw">http://codepen.io/charleyw</a>‘>@charleyw) on <a href="http://codepen.io">http://codepen.io</a>‘>CodePen.

二、如何实现

既然用React写，那么它就必然是一个组件，首先考虑你怎么使用这个组件，也就是这个组件的接口是怎么样的。

<TabsControl>
  <Tab name="red">
    <div className="red"/>
  </Tab>
  <Tab name="blue">
    <div className="blue"/>
  </Tab>
  <Tab name="yellow">
    <div