javascript - ES6 + React 组件实例方法

Question

我正在 React 中制作一个小的 Video 组件(你猜对了，播放视频)我想将该组件嵌入到父组件中，然后能够调用 在视频组件上播放方法。

我的视频组件看起来像:

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 中的一个 Prop ，并放置一个默认 Prop ，例如:

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)

Flux 在这里不是必需的(例如，您可以使用 Redux 或什么都不用)。这里重要的是清晰的单向数据流。