如何在React中将一个组件的状态访问到另一个组件

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，但如果您的应用包含了太多的组件，然后更好地使用可预测的状态容器，如终极版或流量，而而不是通过状态作为道具。

因此，您可以应用这些更改，希望您能得到您所想要​​的：

一个组成部分：-

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;

请提出您的疑问（如果有），或者发现任何错误。