Javascript 在Reactjs中使用来自一个组件的数据

我做了一个计数应用程序，当你点击你的水平，并获得金牌，但如何使用在另一个组件的数据？例如，我想在另一个组件中使用this.state.max

对不起，我还没有反应过来

import React, {Component} from 'react';
import '../App.css';
import darkalien from '../assets/darkgray__0000_idle_1.png';
import darkalien2 from '../assets/darkgray__0033_attack_3.png';
import darkalien3 from '../assets/darkgray__0039_fire_5.png';

var style = {
  color: 'black',
  fontSize: 20
};
var style2 ={
  color: '#daa520',
  fontSize: 20
}

export default class Home extends Component{
   constructor(props) {
   super(props);
   this.state = {
        i: 0,
        j: 1,
        k: 0,
        max: 10,
        maxf: 2,
        maxi: 10

     }
 }
onClick(e) {
  e.preventDefault();

  var level = this.state.j;
  this.setState({i: this.state.i + 1});
  this.setState({k: this.state.k + 1});

  if(this.state.i >= this.state.max){
      this.setState({j: this.state.j + 1});
      this.setState({i: this.state.i});
      this.setState({k: this.state.k});
      if(this.state.j === this.state.maxf){
          this.setState({maxf: this.state.maxf + 1});
          this.setState({max: this.state.max + 10});
      }
    this.setState({i: this.state.i = 0});
  }
}
render(){
    return(
    <header>
        <div className="container" id="maincontent" tabIndex="-1">
           <div className="row">
            <div className="col-lg-12">
                <div className="intro-text">

                        <p className="name" style={style} id="demo3">Level {this.state.j}</p>
                        <p className="name" id="demo4" style={style}>Points: {this.state.k}</p>
                        <p className="name" style={style2} id="demo5">Gold: {this.state.max}</p>

                    <img id="picture" className="img-responsive" src={darkalien} alt="alien-img" onClick={this.onClick.bind(this)} height="150" width="150"/>

                    <progress id="demo2" value={this.state.i} max={this.state.max}></progress>
                    <h1 className="name">Click me!</h1>
                    <hr className="glyphicon glyphicon-star-empty"></hr>
                   <span className="skills">Gain Experience &#9733; Get Coins &#9733; Purchase Armor</span>
                </div>
            </div>
          </div>
        </div>
    </header>
    );
}
}

import React，{Component}来自'React'；
导入“../App.css”；
从“../assets/darkgray_u_0000_idle_1.png”导入darkalien；
从“../assets/darkgray_uu0033_attack_3.png”导入darkalien2；
从“../assets/darkgray_uuu0039_fire_5.png”导入darkalien3；
变量样式={
颜色：'黑色'，
尺寸：20
};
变量style2={
颜色：“#daa520”，
尺寸：20
}
导出默认类Home extends组件{
建造师（道具）{
超级（道具）；
此.state={
i:0，
j:1，
k:0，
最高：10，
maxf:2，
马克西：10
}
}
onClick（e）{
e、 预防默认值（）；
var级别=此.state.j；
this.setState（{i:this.state.i+1}）；
this.setState（{k:this.state.k+1}）；
if（this.state.i>=this.state.max）{
this.setState（{j:this.state.j+1}）；
this.setState（{i:this.state.i}）；
this.setState（{k:this.state.k}）；
if（this.state.j==this.state.maxf）{
this.setState（{maxf:this.state.maxf+1}）；
this.setState（{max:this.state.max+10}）；
}
this.setState（{i:this.state.i=0}）；
}
}
render（）{
返回(
级别{this.state.j}
点：{this.state.k}
黄金：{this.state.max}

点击我！

获得经验★；获得硬币★；购买护甲
);
}
}

我想在我的商店组件中使用this.state.max：

import React, {Component} from 'react';
import blaster from '../assets/blaster_1.png';
import blaster2 from '../assets/blaster_3.png';
import alienSuit from '../assets/predatormask__0000_idle_1.png';
import alienHair from 
'../assets/alien_predator_mask_0007_hair_profile.png';
import Home from '../components/Home';


export default class Store extends Component{
render(){
    return(
        <section id="portfolio">
        <div className="container">
        <div className="row">
        <div className="col-lg-12">
            <h3>Armor and Weapon Store<span>  **Gold:{this.state.j}**  </span></h3>
        </div>

        </div>
        <div className="row text-center">

        <div className="col-md-3 col-sm-6 hero-feature">
            <div className="thumbnail">
                <img src={blaster} alt=""/>
                <div className="caption">
                    <h3>Reggae Blaster</h3>

                    <p>
                        <a href="#" className="btn btn-primary">Buy Now!</a> <a href="#" className="btn btn-default">More Info</a>
                    </p>
                </div>
            </div>
        </div>


    </div>
    </div>
    </section>
    );
}
}

import React，{Component}来自'React'；
从“../assets/blaster_1.png”导入blaster；
从“../assets/blaster_3.png”导入blaster2；
从“../assets/tradatormask__0000_idle_1.png”导入alienSuit；
从…进口
“../assets/alien_predator_mask_0007_hair_profile.png”；
从“../components/Home”导入Home；
导出默认类存储扩展组件{
render（）{
返回(
装甲和武器商店**黄金：{this.state.j}**
雷鬼乐队


);
}
}

React的体系结构专门设计为不具有跨组件依赖关系。如果你有很多依赖项，你会发现自己很快陷入一个“毛球”状态，这会使代码维护变得非常困难

但是如果你想以一种受控的方式管理一个应用程序状态，我建议考虑使用一个状态容器（特别是如果你的应用程序变得更复杂）。例如，您可以研究Redux，并可能使用服务器/数据库来存储更长时间的数据。下面是一个解释不同国家分类的例子

---

当然，这里有指向Redux和的链接，这对您的用例应该有帮助。

您可以通过在类中创建一个返回数据的函数来检索保存在您状态中的数据。比如说

export default class Home extends Component{
   constructor(props) {
   super(props);
   this.state = {
        i: 0,
        j: 1,
        k: 0,
        max: 10,
        maxf: 2,
        maxi: 10

     }
 }

 getMax(){
   return this.state.max
 }

 //Rest of your code...
}

然后，通过使用定义Home的新实例来调用getMax

var home = new Home

然后在需要this.state.max的任何位置调用getMax函数

var max = home.getMax()

---

然而，正如其他答案所说，我建议您考虑另一种形式的状态管理，我个人最喜欢的是Redux。

将其作为道具传递？