React typescript 使用多个接口

Question

我正在尝试使用 typescript。

我尝试了下一个：

const PanelView: IPanel = PanelMenuView;
const PanelView: IPanelMenuPropsView = PanelMenuView;

但仅适用于此：

const PanelView: any = PanelMenuView;

我创建了一个名为IPanelMenuPropsController的PanelMen接口和一个名为PanelMenuControllerState的接口。 但是我正在尝试渲染一个组件PanelView ，它使用一个名为IPanelMenuPropsView的自定义界面并包含以下内容：

export interface IPanelMenuPropsController {
    mapGL: any,
    loadable: boolean,
    setNameMap(name: string): void,
    setTab(tab: string): void,
    selectedTab: string,
    savedMap: boolean,
    nameMap: string,
};

export interface IPanelMenuPropsView {
    savedMap: boolean, 
    selectedTab: string, 
    nameMap: string, 
    error: boolean,
    blocked: boolean, 
    mapGL: any,
    onExit(): any, 
    onSave(): any, 
    onUpdate(): any, 
    onDuplicate(): any, 
    onExport(): any, 
    onSprite(): any, 
    onPlugin(): any, 
    onHelp(): any, 
    onResetMap(): any, 
    onUpdateName(name: string): any, 
    onSelectTab(tab: string): any,
};

为什么尝试渲染组件时自定义界面不起作用？？？

这是我的代码：

import { IPanelMenuPropsController, PanelMenuControllerState } from "../Interface"; 

import PanelMenuView from "../View";

interface IPanel {
    mapGL: any,
    blocked: boolean,
    selectedTab: string,
    savedMap: boolean,
    nameMap: string,
    error: boolean,
}

const PanelView: IPanel = PanelMenuView;

class PanelMenu extends Component<IPanelMenuPropsController, PanelMenuControllerState> {


    render() {
        const { mapGL, loadable, selectedTab, savedMap, nameMap } = this.props;
        const disableAllOptions = !loadable ? true : false;
        return (
            <PanelView
                mapGL={mapGL}
                blocked={disableAllOptions}
                selectedTab={selectedTab}
                savedMap={savedMap}
                nameMap={nameMap}
                error={false}
            />
        )
    }
}

function selectStateApp(state: any) {
    return {
        selectedTab: state.app.selectedTab,
        savedMap: state.map.savedMap,
        nameMap: state.map.nameMap,
    };
}

export default connect(
    selectStateApp,
    dispatch => ({
        setNameMap: (name: string) => MapActions.setNameMap(name)(dispatch),
        setTab: (tab: string) => AppActions.setTab(tab)(dispatch),
    })
)(PanelMenu);

Answer 1

PanelMenuView是一个 React 组件，其中IPanel描述了 React 组件使用的 Props。

理想情况下，您从'../View'导入的PanelMenuView上已经有类型。

您将需要像这样使用这些道具来装饰 React 组件。

const PanelView: React.FC<IPanel> = PanelMenuView;