«PropTyping» возвращение функции - PullRequest
Новая
       5

«PropTyping» возвращение функции

0 голосов
/ 11 января 2020

Я инициализирую useRef в своем родительском компоненте и даю 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;
...