如何在一个反应​​中访问一个组件的状态到另一个组件

时间:2017-10-03 05:00:03

标签: reactjs

import React, { Component } from 'react';
class one extends React.Component 
{
    constructor()
    {
        super();
        this.state = {
            number:26
        }
    }
    render()
    {
        return(
            <div></div>
        );
    }
}
export default one;

import React, { Component } from 'react';
import one from './one'
class HomePage extends React.Component 
{
    render()
    {
        return(
            <div>{one.state.number}</div>
        );
    }
}
export default HomePage;

是否可以访问号码状态 有没有办法将一个组件的状态访问到另一个组件? 如果有任何解决方案,请建议我。

1 个答案:

答案 0 :(得分:4)

正如Shubam所解释的那样,虽然我想将其形成一个完整的答案

首先,我想告诉您,不要使用小写字母来命名您的React组件。因此,请将您的组件命名为One,而不是one

现在回到你的问题: -  否这不可能,如果您的应用包含少量组件,那么最好将state对象作为props传递,但如果您的应用包含太多组件然后最好使用可预测的状态容器,如ReduxFlux,而不是将状态作为道具传递。

所以你可以应用这些变化,我希望你能得到你想要的东西: -

一个组件: -

import React, { Component } from 'react';
import Homepage from './homepage';

class One extends React.Component 
{
    constructor()
    {
        super();
        this.state = {
            number:26
        }
    }
    render()
    {
        return(
            <Homepage data={this.state}/>
        );
    }
}

export default One;

主页组件: -

import React, { Component } from 'react';


class Homepage extends React.Component 
{

    render()
    {
        console.log("this is homepage",this.props);
        return(
            <div>{this.props.data.number}</div>
        );
    }
}

export default Homepage;

请提出您的疑问,如果您发现任何错误。