Question

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

对不起，我对React来说很新鲜

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>
    );
}
}

我想在我的商店组件中使用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>
    );
}
}

Answer 1

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

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

当然 - 以下是Redux must read me和basic tutorial的链接，这对您的用例有帮助。

Answer 2

您可以通过在返回该数据的类中创建函数来检索您所在州的数据。例如

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。

在Reactjs

2 个答案: