在 Reactjs 中使用另一个组件中的数据

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 的架构专门设计为没有跨组件依赖性。如果你有很多这样的依赖关系，你会很快发现自己处于 'hairball' 中，这会使代码维护变得非常困难。

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

当然 - 这是 must read me of Redux and the basic tutorial 的 link，这应该对您的用例有所帮助。

Answer 2

您可以通过在 class 中创建一个 returns 该数据的函数来检索您的状态中保存的数据。例如

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 中使用另一个组件中的数据

Using data from one component in another in Reactjs

javascript

components

prop

reactjs

redux