Javascript 反应：启动屏幕/容器

目前，我有一个页面，上面设置了一个容器，里面运行着一个小游戏，还有一个栏，用来记录完成游戏任务所需的分数/时间

我想建立一个启动屏幕，当你开始游戏的时候，它会显示出来，也许会允许你改变一些选项，比如是否使用加减法等等

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

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

render（）{
返回(
分数：{this.state.Score}
（this.timer=ref）}/>
1+1=2

2+1=3

什么是{this.state.numbers.x}+{this.state.numbers.y}？
答复:
提交
);
}
};

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

---

编辑：另外，我是否应该使用引用来操作父类中的状态等？

最可读的方法是为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()
    }
}

导出默认类SplashScreen扩展React.Component{
renderSplash（）{
让样式={
高度：“100vh”，
宽度：“100vw”，
显示：“flex”，
辩护内容：“中心”，
对齐项目：“中心”
}
返回(
闪屏
)
}
render（）{
返回这个。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()}
    }
}

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
showSplash:true//这是初始状态
}
}
renderApp（）{
返回(
{*/您的代码在这里/*}
)
}
render（）{
{this.state.showSplash？：this.renderApp（）}
}
}

请注意，我将所有内容都划分为函数。在这样的情况下，可以很容易地在状态/组件之间切换

---

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

如果你计划在将来扩展应用程序并增加更多的页面/屏幕，你可能会考虑使用<代码>反应路由器，这需要一点设置，但之后这会使切换屏幕变得更容易。

这里有相当多的教程和示例涉及

react router

：

---

在渲染方法调用的单独方法中设置样式实际上对重新渲染没有影响。不幸的是，这是一个糟糕的例子，但我想对新手强调，将样式和此类样式与常规生命周期方法分开是一个好主意。如果样式基于状态，则会触发不必要的重新渲染。但是在这种情况下你是100%正确的。如果样式依赖于状态，那么你仍然需要重新渲染。我认为正确的方法应该是使用StyleSheet.create或简单的CSS类。这不会保存您的重新渲染，但可以避免在每次渲染时创建对象（这不是您需要太多关注的事情）。我有我的react router index.js页面来路由更改主视图的文件，但我希望在视图中更改视图，而不更改URL。这可能吗？