javascript - 使用 reactjs 中的道具从孩子传递数据

Question

每次进行交易时我都需要更新硬币的数量，这些位于模板组件中，但我不想复制在每个视图中需要加载硬币数量的函数？我向您展示我目前所做的代码，它可以工作，但这不是最佳解决方案，因为我会在每个子组件中重复函数 ** get_coins **。

import React, { Component, useState, useEffect} from 'react'
import { userService } from '../_services';
import Template from '../Layouts/Template';
import { Button } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons'

function MyShopping() {

    useEffect(() => {
        get_coins();
    }, []);

    const [coins, setCoins] = useState([]);

    function get_coins(){
        userService.get_coins()
            .then(resultCoins => {
                setCoins(resultCoins);
            });
    }

    function remove_coins(){
        userService.remove_coins_data()
            .then(result => {
                if (result.status==200) {
                    get_coins();
                }
            })
    }

    return (
        <Template dataCoins={coins}>
            <div className="py-6">
                <Button variant="success" onClick={remove_coins}>
                    Remove <FontAwesomeIcon icon={faExternalLinkSquareAlt} />
                </Button>
            </div>
        </Template>
    );
    
}

export { MyShopping };

import React from 'react';
import { Link } from 'react-router-dom';
import { Navbar, Nav } from 'react-bootstrap';

const Template = ({ dataCoins, children }) =>(
    <React.Fragment>
        <Navbar collapseOnSelect expand="lg" className="cs_principal_nav">
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav>
                    <Nav.Link to="">
                        {dataCoins.expirables} Coins
                    </Nav.Link>
                    <Nav.Link to="">
                        {dataCoins.permanentes} Coins
                    </Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
            {children}
    </React.Fragment>
);

export default Template;

谢谢

标签： javascriptreactjsreact-propsreact-component