时间戳

首页 > 解决方案 > 如何从 redux 商店传递道具

javascript - 如何从 redux 商店传递道具

问题描述

我有一个使用 redux 和 react-router 的简单应用程序。我将我的应用程序组件包装在提供程序标签中，以便它可以访问商店。我在 App.js 中连接了（在 App.js 中）mapStateToProps 和 mapStateToDispatch。我不确定如何将我在 App.js 中定义的函数传递给子组件，因为我正在使用路由。我尝试了渲染技巧，但没有奏效。如果我可以将它传递给 CelebrityPage 组件，我将如何在文件中接收它？任何帮助，将不胜感激。

这是我的 App.js

import React, { Component } from 'react';
import { connect } from 'react-redux'
import './App.css';
import Clarifai from 'clarifai'

// import Particles from 'react-particles-js';
// import particlesOptions from './particleOptions'
import { Signin } from './components/signin/Signin';
import Register from './components/register/Register';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

import { setSearchField } from './context/Actions'
import FacePage from './Containers/FacePage';
import CelebrityPage from './Containers/CelebrityPage';
import ControllerPage from './Containers/ControllerPage';

const mapStateToProps = state => {
  return {
    input: state.input
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleSearchChange: (event) => dispatch(setSearchField(event.target.value))
  }
}
...
 render() {

    return (<Router>
      <Switch >
        <Route path='/celebrity' exact render={props => <CelebrityPage{...props} handleSearchChange={this.handleSearchChange} />} />
        <Route path='/' exact component={Register} />
        <Route path='/signin' exact component={Signin} />
        <Route path='/contoller' exact component={ControllerPage} />
        <Route path='/face-detection' exact component={FacePage} />
      </Switch>
    </Router>)
  }

}


export default connect(mapStateToProps, mapDispatchToProps)(App)

标签： javascriptreactjsredux

解决方案

如果您打算将存储操作和状态传递给子组件，则意味着您拒绝使用 redux 的优势。最好的方法应该是将需要访问操作或状态的任何组件连接到商店。在根组件级别进行连接并将道具传递给子组件并不是一个好的解决方案。

推荐阅读