Question

我想强烈地键入一个ref组件，但我不能这样做并像组件一样引用它

我认为我的问题出在课堂上。有没有办法导出类，这可以同时被识别为组件和类类型？

我试过的类强烈输入ref

import EventsDropdown from "./events-dropdown";

type ExternalProps = {
    id?: string;
    name?: string;
    observations: IObservacao[];
    disabled: boolean;
    showLabel?: boolean;
    onChange?: (args?: any) => void;
    eventId?: number;   
};


class ParticipantObservations extends React.Component<ExternalProps, InternalState> {
    refs: {
        event: EventsDropdown //Didnt recognized like a type
    }
...

    render() {
        return <div>
            {/* works fine like a component */}
            <EventsDropdown name="eventId" showLabel disabled={false} ref={c => this.refs.event = c} />
        </div>
    }

}

在代码末尾带导出的组件EventsDropdown

...

class EventsDropdown extends React.Component<InternalProps & ExternalProps, {}> {
    componentWillMount() {
        this.props.getEvents();
    }

    public selectedText: string;

    render() {    
        return <select id={this.props.id} name={this.props.name} className="form-control" onChange={(e) => { this.props.onChange; this.selectedText = e.currentTarget.options[e.currentTarget.selectedIndex].text }} value={this.props.value} disabled={this.props.disabled} >
            <option value="">{this.props.showLabel ? "Evento" : ""}</option>
            {this.props.result.map(item => <option key={item.key} value={item.key}>{item.value}</option>)}
        </select>;
    }
}

export default connect<{}, {}, ExternalProps>(
    (state: ApplicationState) => state.lookup.events,
    actionCreators
)(EventsDropdown);

Answer 1

您正在导出/导入调用connect的结果，而函数不返回类型。

refs: { event: typeof EventsDropdown }

应该这样做

如何使用typescript强烈地从外部组件键入ref并做出反应

1 个答案: