ES6 + React Component Instance Method

Question

Я делаю небольшой компонент Video в React (так как вы его догадались, воспроизводя видео), и я хочу встроить этот компонент в родительский компонент, а затем иметь возможность вызвать метод play на видео компонент.

Мое видео компонент выглядит следующим образом:

import React, { Component, PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
const { string, func } = PropTypes; 

export default class Video extends Component { 

    static propTypes = { 
    source: string.isRequired, 
    type: string.isRequired, 
    className: string 
    }; 

    play =() => { 

    }; 

    render =() => { 
    const { className } = this.props; 
    return (
     <video className={ className } width="0" height="0" preload="metadata"> 
     <source src={ this.props.source } type={ this.type } /> 
     Your browser does not support the video tag. 
     </video> 
    ); 
    }; 
} 

Это действительно просто, ничего сложного здесь происходит.

В настоящее время в качестве родительского компонента, позволяет называть его Page:

export default class Page extends Component { 
    video = (
     <Video source="some_url" type="video/mp4" /> 
    ); 

    render =() => { 
     <div onClick={ this.video.play } /> 
    } 
} 

Однако, если я вхожу .play это не определено.

Далее я попытался объявить play как опору в Video и поставить подпорку по умолчанию, как:

static defaultProps = { 
    play:() => { 
     const node = ReactDOM.findDOMNode(this); 
    } 
} 

Но в этом контексте, this в неопределенной.

Каков надлежащий способ отображения функции класса React ES6, чтобы он мог быть вызван внешними компонентами? Должен ли я приложить что-то к Video.prototype?

Answer 1

Правильный способ вызвать метод экземпляра компонента ребенка, чтобы не делать это. :-)

Здесь много ресурсов, которые говорят о том, почему, но подводить итог: он создает нечеткий поток данных, он объединяет компоненты вместе, что уменьшает разделение проблем, и его труднее тестировать.

Лучший способ сделать то, что вы хотите, - использовать внешнюю службу (например, излучатель событий) для управления состоянием. В Flux это будут «магазины». Компонент Video запускает действия на основе его текущего состояния (например, PLAYBACK_STARTED), что, в свою очередь, будет обновлять хранилище. Компонент Page может запускать действие START_PLAYBACK, которое также будет обновлять хранилище. Оба компонента прослушивают изменения в состоянии магазина и отвечают соответствующим образом. Например .:

Page -> START_PLAYBACK -> Video (play) -> PLAYBACK_STARTED -> Page (update ui) 

поток не является обязательным требованием здесь (например, вы могли бы использовать Redux или вообще ничего). Здесь важно четкий, однонаправленный поток данных.

Answer 2

Вы можете использовать refs для передачи метода от дочернего элемента к его родительскому.

export default class Page extends Component { 
    video = (
     <Video source="some_url" ref="video" type="video/mp4" /> 
    ); 

    render =() => { 
     <div onClick={ this.refs.video.play } /> 
    } 
} 

Expose Component Functions От