javascript - 行动中使用 Prop -> reducer ->自定义功能

我有一个组件，它是另一个组件的“基础”。我想向新创建的组件添加更多功能

<SomeComponent
onSelect = { this.props.handleSelect }
onDeselect = { this.props.handleDeselect }
selectionList = { valuesList }
value = { values }
origin = "XYZ" />

onSelect触发动作this.props.handleSelect

export function handleSelect(value) {
    return dispatch => {
        dispatch(actionCreator(HANDLE_SELECT, value));
    }
}

该动作进入reducer

case HANDLE_SELECT: {
    const newValues = value_select(state, action);
        return {
            ...state,
            find: {
                ...state.a,
                values: newValues
            }
        }
 }

最后，调用value_select做所有的魔术

export const value_select = function(state, action) {
    ...

    const newData = {
    XYZ: action.payload
    }
    return newData
}

我将如何从"a"中的props映射到component中的value_select()。我需要XYZ所在的地方...
请注意，我无法将任何内容写入onSelect，因此无法写入onClick事件。我使用的是我不想更改的预先设计的component。仅基于原始副本的components。

最佳答案

您需要在SomeComponent中添加另一个处理程序，并添加要传递给原始handleSelect的prop的新参数。如果SomeComponent来自供应商，并且您无法更改其代码，则必须将其包装

class BetterComponent extends React.Component{
handleSelect = (value) {
    this.props.handleSelect(value, this.props.origin)
}

render() {
   return (
      <SomeComponent
        ...this.props
        onSelect = { this.handleSelect }
      />
   )
}

将新参数添加到您的句柄选择

export function handleSelect(value, origin) {
    return dispatch => {
        dispatch(actionCreator(HANDLE_SELECT, {
           value: value,
           origin: origin
        }));
    }
}

然后可以通过action.payload.origin中的value_select访问原点

当然，现在您必须呼叫BetterComponent而不是SomeComponent

<BetterComponent
onSelect = { this.props.handleSelect }
onDeselect = { this.props.handleDeselect }
selectionList = { valuesList }
value = { values }
origin = "XYZ" />

关于javascript - 行动中使用 Prop -> reducer ->自定义功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44173363/