我目前正在尝试使用流来键入组件,并且在这里面对墙。
无需过多介绍实现细节,其想法是使用forwardRef键入子对象数组。理论上应该用flow的新forwardRef typings支持,但是不支持,这是我得到的错误:
Cannot get `currentSubtitleTrack.id` because property `id` is missing in mixed [1]`.
这是最小复制,这是link to the Try Flow playground which runs the latest version of flow(或您选择的任何一种)
// @flow
const React = require("react");
type SubtitlesTrack = {
id: string,
src: string
};
const subtitlesTrack = React.forwardRef<SubtitlesTrack, HTMLElement>(
({ id, src }: SubtitlesTrack, ref) => (
<track ref={ref} id={id} src={src} kind="subtitles" />
)
);
type Props = {
children: React.ChildrenArray<React.Element<typeof subtitlesTrack>>
};
class SubtitlesStreamer extends React.Component<Props> {
subtitlesTracks: { [id: string]: HTMLTrackElement };
render() {
return React.Children.map(this.props.children, currentSubtitleTrack => {
const trackId = currentSubtitleTrack.props.id;
return React.cloneElement(currentSubtitleTrack, {
ref: trackEl => {
if (trackEl instanceof HTMLTrackElement) {
trackEl.track.mode = trackId === "1" ? "showing" : "disabled";
this.subtitlesTracks[trackId] = trackEl;
} else {
delete this.subtitlesTracks[trackId];
}
}
});
});
}
}
module.exports = React.forwardRef<Props, SubtitlesStreamer>((props, ref) => (
<SubtitlesStreamer ref={ref} {...props} />
));
有人遇到过此错误,或者这是最新版本的flow中的错误吗?