“ PropTyping”函数的返回

Question

我正在父组件中初始化useRef，并通过子组件的prop current给出此引用的player。在我的父组件中，引用包含dashjs.MediaPlayer().create()的实例。但是如何告诉PropTypes我的道具player将成为dashjs.MediaPlayer().create()的实例？

注意：组件实际上没有任何意义，因为我已经简化了很多代码。为了使问题易于理解，我一直保持最低要求。

父组件：

import React, { useRef } from 'react';
import dashjs from 'dashjs';
import Controls from './Controls';

export const Player: React.FC = () => {
    const playerRef = useRef(dashjs.MediaPlayer().create()); // instance of `dashjs.MediaPlayer().create()`

    return (
        <div className="player">
            <Controls player={playerRef.current} /> // still an instance of `dashjs.MediaPlayer().create()`
        </div>
    );
};

子组件：

import React from 'react';
import PropTypes from 'prop-types';

const propTypes = {
    player: PropTypes.object.isRequired, // ???
};

type Props = PropTypes.InferProps<typeof propTypes>;

const Controls: React.FC<Props> = ({ player }) => {
    console.log(player.getBitrateInfoListFor('video')); // Property 'getBitrateInfoListFor' does not exist on type 'object'.

    return (
        <div className="player__controls" />
    );
};

Controls.propTypes = propTypes;

export Controls;

[dashjs.MediaPlayer().create()返回一个名为MediaPlayerClass的接口，但我不知道它是否会有所帮助。

编辑：

我有一种解决方案，但是我很确定还有更好的方法：

import React from 'react';
import PropTypes from 'prop-types';
import { MediaPlayerClass } from 'dashjs';

const propTypes = {
    player: PropTypes.object.isRequired
};

type Props = PropTypes.InferProps<typeof propTypes>;

const Controls: React.FC<Props> = ({ player: _player }) => {
    const player = (_player as MediaPlayerClass); // using the prop with the `MediaPlayerClass` interface.

    console.log(player.getBitrateInfoListFor('video')); // no error

    return (
        <div className="player__controls" />
    );
};

Controls.propTypes = propTypes;

export Controls;

Answer 1

this之类的东西有帮助吗？

这会使道具类型看起来像这样：

const propTypes = {
  player: PropTypes.instanceOf(MediaPlayerClass)
};

您必须导入MediaPlayerClass才能在此处引用。