研究ノート-パブリックコンポーネントとコンポーネントジャンプに反応する

---

Reactでは、ページレベルのコンポーネントに加えて、1つ以上のページレベルのコンポーネントによって使用されるいくつかの一般的なコンポーネントが必要になる場合があります。たとえば、ナビゲーションコンポーネントや、数量の加算と減算を制御するコンポーネント。

1.コンポーネントの定義： 

知られているように、コンポーネントを定義する方法は2つあります。1つはクラスコンポーネントで、私は研究ノートに書きました-reactの基本関数。もう1つは機能コンポーネントです。

ステートレスコンポーネント：データを表示するために使用されるコンポーネントのコンストラクターにはthis.stateコンポーネントはなく、複雑なビジネスロジックやデータ取得もありません。ステートレスコンポーネントは、機能コンポーネントとして作成するのが最適です。

どの関数でも、関数がjsxオブジェクトを返す限り、それはコンポーネントです。関数コンポーネントには、このキーワードとライフサイクルフック関数はありません。

import React from 'react';
import style from './index.module.scss';
import { NavLink } from 'react-router-dom';

const MiNav = () => (
        <ul className={style["nav"]}>
                <li>
                        <NavLink to="/home" activeClassName={style["active"]}>
                                <i></i>
                                <span>首页</span>
                        </NavLink>
                </li>
                <li>
                        <NavLink to="/category" activeClassName={style["active"]}>
                                <i></i>
                                <span>分类</span>
                        </NavLink>
                </li>
                <li>
                        <NavLink to="/taste" activeClassName={style["active"]}>
                                <i></i>
                                <span>品味</span>
                        </NavLink>
                </li>
                <li>
                        <NavLink to="/cart" activeClassName={style["active"]}>
                                <i></i>
                                <span>购物车</span>
                        </NavLink>
                </li>
                <li>
                        <NavLink to="/profile" activeClassName={style["active"]}>
                                <i></i>
                                <span>个人</span>
                        </NavLink>
                </li>
        </ul>
);

export default MiNav;

上記のコードと同様に、変数に関数を割り当て、変数をエクスポートすることで、コンポーネントの定義を実現できます。等号の後の関数は矢印関数として記述され、returnは省略されます。

 2.コンポーネントのジャンプ：

私たちは、react-router-domパッケージのNavLinkコンポーネントを介したルートジャンプを実現します。NavLinkコンポーネントは、主にナビゲーションコンポーネントのジャンプを実装し、to属性は、使用するルートを示すために必要です。

リンクコンポーネントは、単純なジャンプを表します。LinkコンポーネントとNavLinkコンポーネントの両方がタグに変換されます。

3.コンポーネントのスタイル：

index.module.scssスタイルをインポートしました。モジュールは、クラス値が混乱していることを意味し、使用する場合は追加の操作が必要です。そして、scssはcssを書くための高度な方法です。コンパイルするにはnode-sassをインストールする必要があります。

を使用する場合は、プロジェクトフォルダのコマンドウィンドウに次の手順を記述してください。

yarn add [email protected]

コンポーネントスタイルで、他のスタイルをインポートするには、@ importを使用する必要があります。

@import '../../assets/_func.scss';

4.コンポーネントの使用：

コンポーネントを使用する必要があるページレベルのコンポーネントを導入することで使用できます。

import  React, { Component } from 'react';
import { MiNav } from '../../components';

class Home extends Component {
        render() {
                return (
                        <div>这是主页
                                <MiNav />
                        </div>
                        
                );
        }
}

export default Home;

上記は、パブリックコンポーネントの定義と、パブリックコンポーネントの簡単な使用法です。