Question

我是React的全新品牌，我将它与ES6课程结合使用。我有一个继承自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
  }
}

在父类中，这不是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

更常见的是，您在LoadingScreen组件实例上设置属性以控制内部表示的可见性，而不是通过对象实例上的函数调用来调整状态。

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);

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

如果LoadingScreen需要，您可以将property值复制到本地状态。

Answer 2

你的第二种方法很接近。

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

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

this.loadingScreen.showTrying();

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

2 个答案: