在 React.Component 的 ES6 class 实例上调用方法

Question

我是 React 的新手，我将它与 ES6 classes 结合使用。我有一个 class 继承自 React.Component 并基于其 state 中的单个属性呈现 DOM。这是它的样子：

class LoadingScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = { state: 'isHidden' };

  showTrying() {
    this.setState({ state: 'isTrying' });
  }

  hideAll() {
    this.setState({ state: 'isHidden' });
  }

  render() {
    switch (this.state.state) {

    case 'isHidden':
      return null;

    case 'isTrying':
      // Returns a bunch of DOM elements
  }
}

在父 class 中，它不是 React 组件（我正在尝试迁移不使用框架的现有代码），我想：

创建 LoadingScreen
调用React.render将其插入DOM
对该实例调用 hide 或 showTrying 等方法来更新其状态

我试过：

this.loadingScreen = new LoadingScreen();
React.render(this.loadingScreen, mountNode); // React invalid component error

// Later on...
this.loadingScreen.showTrying();

也尝试过：

this.loadingScreen = React.render(React.createElement("LoadingScreen"), mountNode);

// Later on...
this.loadingScreen.showTrying(); // Undefined is not a function

显然我在这里遗漏了一些基本的东西。 :)

Answer 1

您的第二种方法很接近。

React.createElement 的第一个参数可以是字符串（div、span 等）或 React.Component 的子类。在你的情况下，第一个参数应该是 LoadingScreen.

this.loadingScreen = React.render(React.createElement(LoadingScreen), mountNode);

this.loadingScreen.showTrying();

Answer 2

更常见的做法是在 LoadingScreen 组件实例上设置属性来控制内部表示的可见性，而不是通过对 object实例。

class LoadingScreen extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    switch (this.props.mode) {
        case 'isHidden':
          return null;
        case 'isTrying':
          // Returns a bunch of DOM elements
    }
  }
}

LoadingScreen.propTypes = { 
    mode: React.PropTypes.string
};
LoadingScreen.defaultProps = { 
    mode: 'isTrying'
};

然后，从 parent，你会做这样的事情，例如：

var currentMode = "isTrying";
React.render(<LoadingScreen mode={ currentMode } />, mountNode);

或者，另一种模式是 parent container/component 使用属性的值（我调用了 mode）只是不创建和渲染LoadingScreen 个组件。

如果 LoadingScreen 需要，您可以像您所做的那样将 property 值复制到本地状态。

在 React.Component 的 ES6 class 实例上调用方法

Call method on ES6 class instance of React.Component

javascript

ecmascript-6

reactjs