React 小图标Font Awesome，适配移动端rem，嵌套多层组件传值用 React.createContext 无需经过n层传递

目录

1. Font Awesome

1.1 引入

1.2 引入组件

1.3 引入图标

1.4 使用组件

2. 适配

3. React.createContext

3.1 用 React.createContext 创建中间站store

3.2 在有数据源的组件内把数据提供出去

3.2.1 引入中间站

3.2.2 使用组件，通过value属性将数据提供出去

3.2.3 完整示例：App.js 

3.3 需要数据的组件用钩子函数 useContext 拿数据

---

1. Font Awesome

Quick Start | Font Awesome Docs

1.1 引入

npm 下载

npm i --save @fortawesome/fontawesome-svg-core

npm i --save @fortawesome/free-solid-svg-icons

npm i --save @fortawesome/free-regular-svg-icons

npm i --save @fortawesome/react-fontawesome@latest

yarn下载

yarn add @fortawesome/react-fontawesome@latest @fortawesome/free-regular-svg-icons @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

1.2 引入组件

import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

1.3 引入图标

import {faPlus} from "@fortawesome/free-solid-svg-icons";

1.4 使用组件

 <FontAwesomeIcon icon={faPlus}/>

2. 适配

在 index.js

// 设置移动端的适配

// 除以几视口的宽度就是多少rem，现在我们设置视口的总宽度为750rem

document.documentElement.style.fontSize = 100 / 750 + 'vw';

根据设计稿宽度改变750的值

3. React.createContext

3.1 用 React.createContext 创建中间站store

store/cart-context.js

import React from 'react';

const CartContext = React.createContext({
     // 这里可以直接空，写也只是提供数据结构，提高可读性
    items: [],
    totalAmount: 0,
    totalPrice: 0,
    addItem: () => {
    },
    removeItem: () => {
    }
});

export default CartContext;

3.2 在有数据源的组件内把数据提供出去

3.2.1 引入中间站

import CartContext from "./store/cart-context";

3.2.2 使用<CartContext.Provider>组件，通过value属性将数据提供出去

<CartContext.Provider value={{ ...cartData, addItem, removeItem }}>
</CartContext.Provider>

3.2.3 完整示例：App.js 

import React, {useState} from 'react';
import CartContext from "./store/cart-context";

const App = () => {


    // 创建一个state，用来存储购物车的数据
    /*
    *   1.商品 [] items
    *   2.商品总数（totalAmount）
    *   3.商品总价（totalPrice）
    * */
    const [cartData, setCartData] = useState({
        items: [{
            id: '1',
            title: '汉堡包',
            desc: '百分百纯牛肉配搭爽脆酸瓜洋葱粒与美味番茄酱经典滋味让你无法抵挡！',
            price: 12,
            img: '/img/meals/1.png'
        },
        {
            id: '2',
            title: '双层吉士汉堡',
            desc: '百分百纯牛肉与双层香软芝，加上松软面包及美味酱料，诱惑无人能挡！',
            price: 20,
            img: '/img/meals/2.png'
        },
        {
            id: '3',
            title: '巨无霸',
            desc: '两块百分百纯牛肉，搭配生菜、洋葱等新鲜食材，口感丰富，极致美味！',
            price: 24,
            img: '/img/meals/3.png'
        }],
        totalAmount: 3,
        totalPrice: 46
    });

    // 向购物车中添加商品
    const addItem = (meal) => {
        // 代码逻辑
    };

    //减少商品的数量
    const removeItem = (meal) => {
        // 代码逻辑
    };


    return (
        <CartContext.Provider value={{...cartData, addItem, removeItem}}>
            <div></div>
        </CartContext.Provider>
    );
};

export default App;

3.3 需要数据的组件用钩子函数 useContext 拿数据

import React, {useContext} from 'react';
import CartContext from "../../../store/cart-context";

const Counter = (props) => {

    // 获取cartContext
    const ctx = useContext(CartContext);


    // 添加购物车的函数
    const addButtonHandler = () => {
        ctx.addItem();
    };

    // 删除食物的函数
    const subButtonHandler = () => {
        ctx.removeItem();
    };

    return (
        <div>
            {ctx.totalPrice}
        </div>
    );
};

export default Counter;