を作成するタブを反応!

4130 ワード
react front ui テキストリンク

だめ!あなたは2分で反応して独自のタブを作成するいくつかの依存関係を必要としない.
(底部の全ソースコード)
閉じるこの動画はお気に入りから削除されています

1 .セットアップ
最初にタブを表示したいので、USENTをインポートし、“1”で起動します.
const [toggleState, setToggleState] = useState(1);

2 .トグルの設定
JSXでは、EventListenerを設定します.
<button
   className="tabs"
   onClick={() => toggleTab(1)}
>
  Tab 1
</button>
次に、状態を変更するスイート関数を作成します.
const toggleTab = (index) => {
    setToggleState(index);
}
うわー、ロジックはすでに完了です!

3 . Conditionnalクラスのレンダリング時間です.
今すぐ右タブと右のコンテンツを同時に表示するには、便利な三項演算子を使用します.
タブごとに
 <button
    className={toggleState === 1 ? "tabs active-tabs" : "tabs"}
    onClick={() => toggleTab(1)}
 >
    Tab 1
 </button>
それぞれの内容について:
<div
className={toggleState === 1 ? "content  active-content" : "content"}
>
そして、Vilは引きます!🥖🍷
素敵な再利用可能なコンポーネント.
すべての光沢のあるCSSでソースコードはここにあります.
https://github.com/Ziratsu/YT-REACT-TABS/blob/master/src/App.js
私のブランドの新しいYouTubeチャンネルを見てください.
私に続くパイオニアであってください?😎
次回のいくつかの迅速かつ洗練されたチュートリアルを参照してください!
[デコード]クルーズアルゴリズム
Node-mysql非同期操作を実現(下)