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

Question

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;

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

Answer 1

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

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

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

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

一个组件： -

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;

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