当前位置: 首页 > 面试题库 >

如何在react-redux中访问第二个组件中的存储

怀刚毅
2023-03-14
问题内容

我只有一个组件App.js,试图使用来保存状态redux。在index.js中,我只为<App />组件设置存储。

index.js

let store = createStore(scoreReducer);

ReactDOM.render(
  <Provider store={store}><App /></Provider>,
  document.getElementById("root")
);
registerServiceWorker();

我有这种方法App.js可以将状态映射到props中,该props在内部App.js

App.js

function mapStateToProps(state) {
  return { score: state.score, status: state.status };
}

到目前为止一切都很好,现在我不确定如何{ this.props.score}在另一个组件中访问?

index.js如果要访问{this.props.score}另一个组件,我需要在第二个组件中进行哪些更改?


问题答案:

使用提供程序时,作为提供程序高阶组件的子级的任何组件都可以通过使用connect功能来访问商店属性。

因此,您可以在Provider子级的任何组件中添加以下内容,并访问得分道具

function mapStateToProps(state) {
  return { score: state.score, status: state.status };
}

export default connect(mapStateToProps)(MyComponent)

但是,如果该其他组件是该组件的直接子代,App那么您也可以将score propa作为prop从App 传递给该组件

<MyComponent score={this.props.score}/>


 类似资料:
  • 问题内容: 我只是做一个简单的应用程序来学习与redux异步。我已经使所有工作正常进行,现在我只想在网页上显示实际状态。现在,我实际上如何在render方法中访问商店的状态? 这是我的代码(所有内容都在一页中,因为我只是在学习): 因此,在状态的render方法中,我想列出商店中的所有内容。 谢谢 问题答案: 您应该创建单独的组件,该组件将侦听状态更改并在每次状态更改时进行更新:

  • 我只是做了一个简单的应用程序学习异步与Redux。我已经使所有的工作,现在我只想显示的实际状态到网页上。现在,我如何在render方法中实际访问存储的状态? 这里是我的代码(所有内容都在一个页面中,因为我只是在学习): 谢谢

  • 我有一个react组件,它加载在路由上 我需要从components构造函数中的url访问一个参数 我该怎么做呢? 我可以这样访问它吗:

  • 问题内容: 我有一个化简器,为了计算新状态,我需要操作中的数据以及该化简器未管理的部分状态数据。具体来说,在下面将显示的减速器中,我需要访问该字段。 initialState.js: FormsReducer.js: index.js(根减速器): 如何访问此字段? 问题答案: 我将为此使用thunk,这是一个示例: 基本上,您会获得操作所需的所有数据,然后可以将该数据发送到减速器。

  • 问题内容: 这是我制作的屏幕,我在该屏幕上导入了三个文件,这些文件将在单击单选按钮时显示。另外还有一个相关的移动屏幕,例如,我现在导入了,如您看到的BigText,它包含表格,现在我想在BigTextMobile组件中打印其输入值 问题答案: 为了简化解决方案,您可以执行以下操作: 然后,在 BigText 组件中,您可以通过此回调添加一些数据,如下所示: 并将数据从状态传输到您的 BigText

  • 我在react native中有一个搜索栏组件,它在父组件中导入, SearchBar子组件具有以下元素: 是否可以访问此子组件在其中导入的父组件中的状态?提前感谢你的帮助