在Reactjs中使用另一個組件中的數據

Question

我做了一個計數應用程序，當您單擊您的級別並獲得金幣時，但如何在另一個組件中使用數據？例如，我想在另一個組件中使用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> 
    ); 
} 
} 

我想用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

您可以通過在返回該數據的類中創建一個函數來檢索保存在您的狀態中的數據。例如

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... 
} 

你會再調用GetMax的定義與

var home = new Home 

首頁的新實例，然後調用該函數GetMax的，無論你需要你的this.state.max

var max = home.getMax() 

然而，正如其他答案所說，我會建議看看另一種形式的國家管理，我個人最喜歡的是Redux。

Answer 2

陣營的架構是專爲沒有跨組件依賴關係。如果你有很多這些依賴關係，你會發現自己很快陷入了一個「毛球」，這會使代碼維護變得非常困難。

但是，如果您想以受控方式管理應用程序狀態，我會建議考慮使用狀態容器（尤其是如果您的應用程序變得更復雜）。例如，您可以查看Redux並可能使用服務器/數據庫來存儲更長時間的數據。這是一個article解釋不同的國家分類。

當然 - 這裏是Redux的must read me和basic tutorial的鏈接，這應該有助於您的使用案例。