问在ReactJS上的不同组件之间更新状态

EN

  import React from 'react';
    import { render } from 'react-dom';
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

    import Header from './header';
    import Footer from './footer';
    import Posts from './posts';
    import Post from './post';
    import Products from './products';
    import Product from './product';
    import Page from './page';

    // Load the Sass file

    require('./style.scss');
    const App = () => (
        <div id="page-inner">
            <Header />
            <main id="content">
                <Switch>

                    <Route exact path={Settings.path + 'products/:product'} component={Product} />

                </Switch>
            </main>
            <Footer />
        </div>
    );

    // Routes
    const routes = (
        <Router>
            <Route path="/" component={App} />
        </Router>
    );

    render(
        (routes), document.getElementById('page')
    );

import React from "react";
import { Link } from "react-router-dom";

class Header extends React.Component {
constructor(props) {
        super(props);
        this.state = { products: [], total: 0 }
        var total = 0;
    this.cartUpdated = this.cartUpdated.bind(this)


      }

      componentDidMount() {

        //let cart = localStorage.getItem('total');
              //   this.setState({  total: 100  });



      }
      cartUpdated()
      {
                 this.setState({  total: cart+100  });


      }




render() {
    return (

          <div className="cart-icon p-3 m-auto">
            Cart/ Total: <span className=""><span className="cart">€</span>{this.state.total}</span><i className="fas fa-shopping-cart" />
          </div>

    );
  }
  }

export default Header;

import React from "react";
import NotFound from "./not-found";

import "react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';



class Product extends React.Component {





  constructor(props) {
    super(props);
    this.state = { product: {},  total: 0
};

    // ACTIONS
// addToCart
     this.addToCart = this.addToCart.bind(this);





  }
  addToCart() 
  {
        this.props.cartUpdated;

     /*
        let total = localStorage.getItem('total') 
                      ? JSON.parse(localStorage.getItem('total')) : {};

        localStorage.setItem('total', 100); */

  }



  componentDidMount() {


          this.fetchData();


  }

  fetchData = () => {
    .......
  };

  renderProduct() {
     if (this.state.product.images) {
 const images = [];
 if (this.state.product) {

   this.state.product.images.map((image, i) => {  
    var new_image = {"original":image, "thumbnail":image}  ; 
          images.push(new_image);
        });
 }




    return (

      <div className="col-md-12">
      <div className="row">
        <div className="col-md-6">
              <ImageGallery items={images} showPlayButton={false} showFullscreenButton={false} thumbnailPosition="left" />
           </div>
                <div className="col-md-6">
                <h4 className="card-title">{this.state.product.name}</h4>
            <p className="card-text">
              <strike>${this.state.product.regular_price}</strike>{" "}
              <u>${this.state.product.sale_price}</u>
            </p>
            <p className="card-text">
              <small className="text-muted">
                {this.state.product.stock_quantity} in stock
              </small>
            </p>
            <p
              className="card-text"
              dangerouslySetInnerHTML={{
                __html: this.state.product.description
              }}
            />
            <div className="superflex add_to_cart_wrapper">
  <button type="submit" name="add-to-cart" value={93} className="add_to_cart btn btn-success alt" onClick={this.props.cartUpdated}>Add to cart</button>
</div>
</div>
</div>
      </div>
    );
  }
  }

  renderEmpty() {
    return <NotFound />;
  }

  render() {
    return (
      <div className="container post-entry">
        {this.state.product ? this.renderProduct() : this.renderEmpty()}
      </div>
    );
  }





}

export default Product;