Reactjs内の別のコンポーネントのデータを使用する

Question

レベルをクリックして金を受け取ったときに、別のコンポーネントでデータをどのように使用するのかという計数アプリケーションを作成しましたか？たとえば、別のコンポーネントでthis.state.maxを使用したいとします。

申し訳ありませんが、私は私が私の店コンポーネントで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} 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の使用例を参考にしてください。