react-tabsでタブを作成する【React】

■はじめに

ここでは、「react-tabs」というライブラリを使用してタブを作成します。

こちらの公式サイトに書かれているような物が作成できます。

■手順

以下のコマンドで「react-tabs」をインストールしてください。

npm install react-tabs

ソースコードの全量は以下(App.jsに上書きすれば動きます。)

import React from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
class App extends React.Component{
render()
{
var textData = ""
function changeText(e) {
textData = e.target.value
}
function btnClick() {
alert(textData);
}
return (
<div>
<Tabs>
<TabList>
<Tab>Tab1</Tab>
<Tab>Tab2</Tab>
</TabList>
<TabPanel>
<h2>タブ1</h2>
</TabPanel>
<TabPanel>
<h2>タブ2</h2>
</TabPanel>
</Tabs>
</div>
);
}
}
export default App;

コメントを残す