在React.js中使用来自另一个组件的数据

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的体系结构经过专门设计，不具有跨组件依赖性。 如果您有很多依赖关系，您很快就会陷入困境，这将使代码维护非常困难。

但是，如果您想以受控方式管理应用程序状态，我建议您考虑使用状态容器（尤其是当您的应用程序变得更复杂时）。 例如，您可以研究Redux，并可能还会使用服务器/数据库存储更长的时间数据。 这是一篇文章，解释了不同的状态分类。

当然，这是Redux 必读内容和基础教程的链接 ，它们将对您的用例有所帮助。

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。