React redux提供程序的孙子
React redux provider grand child
我有一个主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)
相关文章:
- Redux应用程序结构-在哪里放置服务/业务逻辑
- React/redux应用程序在Safari上呈现空白屏幕
- 在 React/Redux 应用程序中,我应该何时显式传递一个 prop,而不是使用 mapStateToProps 从
- 我在哪里从 React Redux 应用程序中的服务器获取初始数据
- 在同构应用程序中使用redux
- 如何在React应用程序中处理权限检查(Redux中的状态维护)
- 如何/在哪里从redux应用程序中的服务器转换日期
- 在前端测试 react + redux 应用程序时忽略与浏览器相关的变量
- 试图通过一些实用程序减少 redux 样板
- 如何将 Redux 的提供程序与 React 一起使用
- redux/react 应用程序中的状态有一个带有化简器名称的属性
- 如何在 React Redux 应用程序中使用装饰器
- 如何在 Redux 中创建全局错误处理程序并在需要时覆盖它
- 在 Redux 应用程序中放置特定于模型的业务逻辑的位置
- 在 Redux 应用程序中写入本地存储的位置
- 运行 react/redux 应用程序所需的最低服务器.js
- 在同构 Redux 应用程序中设置 cookie 的位置
- 在尝试管理和访问不同组件和处理程序方法中的状态时,我可以使用RxJS与Redux/context吗
- react/redux应用程序中的服务实例在哪里
- Isomorphic Redux应用程序未注册Redux Thunk