react+redux 子组件如何获取道具？

Question

这是我的代码：
操作：
const increaseAction = { type: 'increase' }
减速器：

  // Reducer
  function counter(state = { count: 0 }, action) {
    const count = state.count
    switch (action.type) {
    ┊ case 'increase':
    ┊ ┊ return { count: count + 1 }
    ┊ default:
    ┊ ┊ return state
    }
  }

这是我的商店：
const store = createStore(counter)
及其他：

  // Map Redux state to component props
  function mapStateToProps(state) {
    console.log(33333);
    return {
    ┊ value: state.count
    }
  }

  // Map Redux actions to component props
  function mapDispatchToProps(dispatch) {
    return {
    ┊ onIncreaseClick: () => {
    ┊ ┊ console.log(22222222222);
    ┊ ┊ dispatch(increaseAction)
    ┊ }
    }
  }

  // Connected Component
  const App = connect(
    mapStateToProps,
    mapDispatchToProps
  )(Main)


  ReactDOM.render(
    ┊ <Provider store={store}>
    ┊ ┊ <App />
    ┊ </Provider>,
    document.getElementById('content')
  );

**我的主要成分：**

>>class Main extends React.Component {
    constructor(props) {
    ┊ super(props);
    }
    render() {
      const {value, onIncreaseClick} = this.props;
    ┊ return (
    ┊ ┊ <div className={reactRootClass}>
    ┊ ┊ ┊ <div className='trade-left' onClick={onIncreaseClick}>
    ┊ ┊ ┊ </div>
    ┊ ┊ ┊ <div className='trade-right'>
    ┊ ┊ ┊ ┊ <Counter />
    ┊ ┊ ┊ </div>
    ┊ ┊ </div>
    ┊ )
    }
  }

这是我的问题：
现在，我可以在 <div className='trade-left' onClick={onIncreaseClick}>

上调用 onIncreaseClick

现在我想在我的 <Counter /> 组件中调用 onIncreaseClick，我怎样才能像在 <Main> 组件中那样获得 value 和 onIncreaseClick？ props?
这是我的 <Counter> 组件：

>>import React, { Component, PropTypes } from 'react'
  export default class Counter extends Component {
    render() {
    ┊ const { value, onIncreaseClick } = this.props
    ┊ return (
    ┊ ┊ <div>
    ┊ ┊ ┊ <span>{value}</span>
    ┊ ┊ ┊ <button onClick={onIncreaseClick}>Increase</button>
    ┊ ┊ </div>
    ┊ )
    }
  }

我只想在这个onIncreaseClick中调用

Answer 1

您可以通过 MapStateToProps 方法传递状态（给 children's），同样您可以通过 mapDispatchToProps 函数将动作传递给 children's，如下所示：

function mapDispatchToProps(dispatch) {
  const {updateData} = importedActions;
  return {
    actions: bindActionCreators({updateData}, dispatch),
  };
}

这是容器与层次结构中 children 的所有组件通信的方式

react+redux 子组件如何获取道具？

react+redux how can son component get props?

reactjs

redux

react-redux