React redux提供程序的孙子

React redux provider grand child

本文关键字:程序 redux React      更新时间:2023-09-26

我有一个主js文件,比如:

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider}  from 'react-redux';
import {store}  from './store.js';
import {App} from './app.js'
ReactDOM.render(<Provider store={store}><App /></Provider>,      document.getElementById('content'));

我的App.js是这样的:

import React from 'react';
import { connect } from 'react-redux';
import { Proba } from './proba.js'
export class App extends React.Component
{
    constructor()
    {
        super();
    }
    render()
    {
        return (<div><button>Success</button><Proba /></div>);
    }
}
function mapStateToProps(store)
{
    return {
        a: 'ok'
    };
}
function mapDispatchToProps(dispatch)
{
    return {};
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

我如何从Proba组件到达存储?我可以在App中获得它,但不知道如何将它传递给它的孩子。

我尝试了以下但不工作,我仍然得到一个空对象在我的proba.js:

import React from 'react'
import { connect } from 'react-redux';
export class Proba extends React.Component
{
    constructor(props)
    {
        super(props);
        console.log(this.props);
    }

    render()
    {
        return <p>{this.props.a}</p>;
    }
}
function anotherMapStateToProps(store)
{
    return {
        a: 'ok'
    };
}
function anoterMapDispatchToProps(dispatch)
{
    return {};
}
export default connect(anotherMapStateToProps, anoterMapDispatchToProps)(Proba)

与您对App所做的相同。connect()它并选择你想传递给组件作为道具的存储值。

export default connect(anotherMapStateToProps, anoterMapDispatchToProps)(Proba)