Question

我想创建一个包装在redux connect中的通用复选框UI组件。我想将组件的redux操作作为道具传递给我，以便可以在connect dispatch操作上使用此操作：

const CheckBoxWithState = connect(
  state => ({
    xxxxxxxxxxxxx
  }),
  dispatch => (
    dispatch(this.props.reduxAction)
  ),
)(CheckBox)

可以这样做吗？

Answer 1

connect（mapDispatchToProps）的第二个参数获得两个参数：dispatch和组件的props。因此，您可以像这样使用props：

const CheckBoxWithState = connect(
  state => ({
    xxxxxxxxxxxxx
  }),
  (dispatch, props) => ({
    action: actionPayload =>
      dispatch({ type: props.reduxAction, payload: actionPayload })
  })
)(CheckBox);

然后在CheckBox中调用操作：

const CheckBox = (props) => {
   const { action } = props;
   const onChange = (value) => {
      action({ checked: value });
   }
   // ...
}

如何将React组件作为传递对象传递给React组件

1 个答案: