流-无法获得`children.props.id`,因为混合属性'id'丢失

时间:2019-04-30 09:14:51

标签: javascript reactjs flowtype

我目前正在尝试使用流来键入组件,并且在这里面对墙。

无需过多介绍实现细节,其想法是使用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中的错误吗?

0 个答案:

没有答案