Study notes-react public components and component jump

---

In React, in addition to page-level components, we sometimes need some common components that will be used by one or more page-level components. For example, navigation components and components that control the addition and subtraction of quantities.

1. Component definition: 

Known, there are two ways to define components: one is class components, I wrote in the study notes-basic functions of react. The other is functional components.

Stateless component: There is no this.state component in the constructor in the component, which is used to present data, and there is no complicated business logic and data acquisition. Stateless components are best written as functional components.

For any function, as long as the function returns a jsx object, it is a component. In the function component, there is no this keyword and life cycle hook function.

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;

Just like the above code, we can realize the definition of the component by assigning a function to a variable and exporting the variable. The function after the equal sign is written as an arrow function, and return is omitted.

 2. Jump of components:

We realize the route jump through the NavLink component in the react-router-dom package. The NavLink component mainly implements the jump of the navigation component, and the to attribute is required to indicate the route to be taken.

The Link component represents a simple jump. Both Link and NavLink components will be converted into a tags.

3. The style of the component:

We imported the index.module.scss style. Module means that the class value is confused, and additional operations are required when using it. And scss is an advanced way of writing css. You need to install node-sass to compile.

When using, write the following instructions in the command window of the project folder:

yarn add [email protected]

In the component style, to import other styles, you need to use @import.

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

4. Use of components:

It can be used by introducing the page-level component that needs to use the component.

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

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

export default Home;

The above is the definition of public components, and the simple use of public components.