Question

我正在制作由redux控制的模态组件，因此我通过调度SET_MODAL注入模态组件的ref，以便可以使用它来更改模态组件。

dispatch(setModal(modalComponentRef));

// reducer
const reducer = (state, action) => {
    if (action.type === "SET_MODAL") {
      return {
        ...state,
        modal: action.payload.modal,
      }
    }
}

然后通过调度动作SHOW_MODAL

来调用模式组件

const onOpen = () => { ... }
dispatch(showModal(onOpen));

const reducer = (state, action) => {
  if (action.type === "SHOW_MODAL") {
    return state.modal.open(action.payload.onOpen);
  }
}

模式组件应通过调用其函数open()

来打开

const Modal = (props) => {
  const [isOpen, setIsOpen] = useState(false);
  const open = (onOpen) => {
     setIsOpen(true);
     onOpen();
  }
  return {
    isOpen && (
      <div>
        // ...
      </div>
    )
  }
}

在这种情况下，我要强制react组件必须具有open: () => void，该问题如何通过定义类型定义来实现？

// modalComponentRef must have open()
dispatch(setModal(modalComponentRef));

Answer 1

如果您要强制传递给setModal()的参数必须具有.open()方法，则约束应放在setModal的函数签名中。

function setModal<T extends { open(): void }>(ref: T): { type: string, action: { modal: T } }

打字稿：组件必须具有open（）

1 个答案: