Javascript 对React.Component的ES6类实例调用方法

我是一个全新的反应者，我将它与ES6课程结合使用。我有一个类继承自

React.Component

，并基于其

状态中的单个属性呈现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
  }
}

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

创建加载屏幕的实例
调用
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

很明显，我在这里遗漏了一些基本的东西。：）
 你的第二次接近

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

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

this.loadingScreen.showTrying(); 

更常见的情况是，您可以在
加载屏幕
组件实例上设置一个属性来控制内部表示的可见性，而不是通过对对象实例的函数调用来调整状态

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'
};

然后，从家长那里，您可以执行以下操作，例如：

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

var currentMode=“isTrying”；
React.render（，mountNode）；

或者，另一种模式是父容器/组件使用属性值（我称之为
模式
）根本不创建和呈现
加载屏幕
组件

如果
加载屏幕
需要，您可以像以前一样将
属性
值复制到本地状态。
哇，我比我想象的还要接近。谢谢莫豪斯！还有一个很好的建议，尽管我将mode保持为字符串，因为实际上不止两个（在示例中尽量保持简单）。听起来您提倡每次通过单独调用render创建一个新组件实例。我可以理解为什么这是有意义的，但是在迁移这段代码的情况下，我需要保留实例。在React中，您实际上需要保留实例是不寻常的。事实上，这一点都不典型（而且是一种反模式）。React组件应根据需要创建，并从状态/属性实例化。如果这是新代码（必须是），那么您应该能够使用标准React模式影响组件的行为，而无需直接对组件实例调用方法。例如，我将代码切换为传入一个变量。而且——布尔值的变化在我的代码中是偶然的。我写的时候在想“可见性”，忘了你用了字符串。