Question

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

<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，我不想改变它。只有基于原始版本的{{1}}。

Answer 1

您需要在SomeComponent中添加另一个处理程序，并添加要与传递给原始handleSelect的道具的新参数。如果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" />

获取道具 - ＆gt;减速机 - ＆gt;服务功能

1 个答案: