时间戳

首页 > 解决方案 > 强制使用两个道具之一调用反应组件

reactjs - 强制使用两个道具之一调用反应组件

问题描述

我正在构建一个具有两个可选道具的反应组件。虽然这两个道具都是可选的，但我希望至少其中一个在运行时传递。如果两个道具都缺失，那么组件应该无法渲染。对于上下文，我使用 Typescript 与功能组件反应，并且我的道具被定义为接口。查看下面的示例代码，它为我的自动建议组件定义了 props

interface AutosuggestProps {
    name: string;
    placeholder: string;
    suggestions?: any[];
    onChange?: (value: string) => void;
    onSuggestionSelected: (value: object) => void;
    httpSearch?: (abortController: AbortController, query: string) => Promise<FetchResponse<any>>
}

该Autosuggest组件可以以两种方式使用

  1. 组件的创建者在运行时可以选择监听onChange事件然后执行搜索，然后通过suggestionsprops 或更新建议
  2. 让Autosuggest组件处理搜索并更新它自己的状态，而不是依赖suggestions传递给它的道具。

我已经取消清除onChange并httpSearch作为可选道具，但我希望其中至少有一个存在，否则组件应该无法渲染。我的意思是Autosuggest应该像这样调用

<Autosuggest
    name="person"
    placeholder="Find person"
    onChange={handleChange}
    suggestions={suggestions}
/>

或者

<Autosuggest
    name="person"
    placeholder="Find person"
    httpSearch={searchPerson}
/>

但从来没有这样

<Autosuggest
    name="person"
    placeholder="Find person"
/>

标签： reactjstypescript

解决方案

推荐阅读