Utilisation de données d'un composant dans un autre dans Reactjs

Question

J'ai fait une application de comptage que lorsque vous cliquez sur vous le niveau et obtenir de l'or, mais comment utiliser les données dans un autre composant? Par exemple, je veux utiliser this.state.max dans un autre composant.

Désolé, je suis tout à fait nouveau réagir

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

Je veux utiliser la this.state.max dans mon composant magasin:

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

Vous pouvez récupérer les données contenues dans votre état en créant une fonction dans la classe qui renvoie ces données. Par exemple

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

Vous appelleriez alors getMax en définissant une nouvelle instance de la maison avec

var home = new Home 

puis appelez la fonction getMax partout où vous avez besoin de votre this.state.max

var max = home.getMax() 

Cependant, comme les autres réponses ont dit que je recommanderais de regarder une autre forme de gestion d'état, mon favori personnel étant Redux.

Answer 2

architecture de React est spécialement conçu pour ne pas avoir dépendances inter-composantes. Si vous aviez beaucoup de ces dépendances, vous vous retrouvez rapidement dans une «boule de poils» qui rendrait l'entretien du code très difficile.

Cependant, si vous voulez gérer un état d'application de manière contrôlée, je vous recommande d'utiliser un conteneur d'état (surtout si votre application devient plus complexe). Vous pouvez regarder dans Redux par exemple et potentiellement utiliser également le serveur/base de données pour stocker plus de données à long terme. Voici un article expliquant une catégorisation différente des états.

Et bien sûr - Voici le lien vers le must read me de Redux et le basic tutorial, ce qui devrait aider avec votre cas d'utilisation.