Question

我正在写游戏，当游戏结束时，我希望它重置为初始状态。我没有在文档中找到任何有意义的信息，所以我一直在为我的Game类添加一个重置方法。首先，我尝试执行以下操作，希望创建一个我可以稍后扩展的基类，但是使用组件名称的变量会失败：

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ...
    };
  }

  reset() {
    var node = ReactDOM.findDOMNode(this);
    if (node) {
      ReactDOM.unmountComponentAtNode(node);
      ReactDOM.render(<Game />, node);
    }
  }

  ...
}

我继续前进，并尝试按如下方式对组件名称进行硬编码：

这非常有效，但我想知道是否有更好的内置方式，或更通用的方式。

Answer 1

<强>更新请忽略之前的答案，在ES2015类模式中，replaceState显然不可用。无论如何，另一种解决方案是将游戏实例保存在包装器组件的状态中。

工作小提琴：https://jsfiddle.net/dannyjolie/upktozt1/1/

当您重置为新游戏时，这将从App的状态中移除旧游戏，并且新游戏将取而代之。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.newGame = this.newGame.bind(this);
    this.state = {
      game: ()=><Game />
    };
  }

  newGame () {
    this.setState({
      game: () => <Game />
    });
  }

  render () {
    const ActiveGame = this.state.game;
    return (
      <div>
        <ActiveGame />
        <button onClick={this.newGame}>RESET GAME</button>
      </div>
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      foo: 'Bar'
    };
    this.onButtonClick = this.onButtonClick.bind(this);
  }

  onButtonClick () {
    this.setState({
      somethingElse: 'Hello',
      foo: 'Changed foo'
    });
  }

  render () {
    return (
      <div>
        <button onClick={this.onButtonClick}>Set state.somethingElse</button>
        <p>state.foo: {this.state.foo}</p>
        <p>state.somethingElse: {this.state.somethingElse || '(not defined yet)'}</p>
      </div>
    );
  }
}

Answer 2

如果只需重置state，则可以将默认状态移动到某个函数或变量中，当需要重置状态时，只需使用此函数或变量的值调用setState。

示例：

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state = this.getState(); // set state from getState result
        this.onButtonClick = this.onButtonClick.bind(this);
        this.onReset = this.onReset.bind(this);
    }

    getState() {
        return {
            number: 0
        }
    }

    onReset() {
        this.setState(this.getState()) // set state from getState result
    }

    onButtonClick () {
        this.setState({
            number: this.state.number + 1
        });
    }

    render () {
        return (
            <div>
                <button onClick={this.onButtonClick}>
                    Increment
                </button>
                <p>{this.state.number}</p>

                <button onClick={this.onReset}>
                    Reset
                </button>
          </div>
        );
    }
}

Example on JSFiddle

Answer 3

我刚刚使用setState对这个问题应用了另一个解决方案并迭代了状态自己的属性，将它们设置为vertx run sender.js -cluster，这对我很有用：

undefined

其中_setInitialState返回需要为应用程序初始化的属性。

这结合了不需要在初始化对象中维护状态的完整轮廓的优点，同时也不需要在重置时重新安装组件的开销。

有没有一种方法可以使用ES6类将反应组件重置为初始状态？

3 个答案: