Question

目前我有一个如上所述设置容器的页面，里面有一个小游戏，还有一个栏，用于保持游戏中完成任务所需的分数/时间。

我想构建一种最初在游戏开始时显示的启动画面，并且可能允许您更改一些选项，例如是否使用加法/减法等。

我对React很新，所以我不确定我是否完全理解渲染的一切是如何工作的，但我如何构建它以使容器不再渲染，但可以在渲染和游戏本身之间进行更改。到目前为止，我在渲染部分中的代码是：

 render() {
    return (
      <section className="arithmetic">
        <div className="arithmetic__game">
          <div className="row arithmetic__row--details">
            <div className="arithmetic__score">
            Score:&nbsp;&nbsp;{this.state.score}
            </div>
            <div className="arithmetic__timer">
              <Timer onRef={ref => (this.timer = ref)} />
            </div>
          </div>
          <div className="row arithmetic__row--main">
            <div className="arithmetic__examples">
              1 + 1 = 2<br/>
              2 + 1 = 3<br />
            </div> 
            <div className="arithmetic__game-container">
            What is {this.state.numbers.x} + {this.state.numbers.y}?
              <div className="arithmetic__form-container">
                <form className="main-form" onSubmit={this.handleSubmit}>
                  <label>
                    Answer: &nbsp;&nbsp;
                    <input className="input-field" type="text" value={this.state.value} onChange={this.handleChange} />
                  </label>
                  <button className="btn-submit" type="submit">Submit</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
};

我在考虑将两个视图放在不同的文件中，但这意味着要移出许多依赖函数，这些函数似乎会造成很大的混乱。

编辑：另外，我应该使用refs来操纵父类的状态等吗？

Answer 1

最可读的方法是为Splashscreen创建一个组件，就像这样。请注意，我正在为自己的函数设置组件的样式，以防止不必要的重新渲染。

export default class SplashScreen extends React.Component {
    renderSplash() {
        let splashStyle = {
            height: "100vh", 
            width: "100vw", 
            display: "flex", 
            justifyContent: "center", 
            alignItems: "center"
        }
        return(
            <div style={splashStyle}>
                <h1>SPLASH SCREEN</h1>
            </div>
        )
    }

    render() {
        return this.renderSplash()
    }
}

然后在您的父组件中，您需要设置处理逻辑的状态。假设你的类是App，那么它看起来应该是这样的：

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
          showSplash: true //this is the initial state
        }
    }

    renderApp() {
        return (
            {*/ Your code here /*}
        )
    }

    render() {
        {this.state.showSplash ? <SplashScreen /> : this.renderApp()}
    }
}

请注意，我正在分割函数中的所有内容。在这种情况下，它可以很容易地在状态/组件之间切换。

我不知道你想如何显示启动，如果你想在加载数据或某些计时器功能后停用它，但如果你愿意，我会用一些提示更新这个答案。

Answer 2

如果您计划将来扩展应用程序并添加更多页面/屏幕，您可以考虑使用react-router，这需要一些设置，但之后使切换屏幕更容易。

这里有很多涉及react-router的教程和示例： https://reacttraining.com/react-router/

反应：启动屏幕/容器

2 个答案: