Javascript 在React中管理组件功能的正确方法

我在React文档页面上发现，使用正确的React方法的技术可以基于单一责任原则，即组件应该只做一件事。 我已经制作了一个简单的

游戏板

，其中包括输入、随机生成的分数和一个条件。所有计算和演示均在

Gameboard

组件中进行。 现在我想把我的应用程序分成不同的组件。正确的方法是什么？ 我认为有一种方法是制作不同的组件，如：

分数

，

输入

，

随机数

。但是我很迷路。我制作了一个

Score

组件，在该组件中我显示数据并更新

Score

状态。那么，我应该如何将这些数据传递给我的父母

Gameboard

组件呢？使用回调函数

---

或者我应该在

Gameboard

中为我的

score

值设置一个变量，所有的增量（

score的功能：this.state.score+1

应该在

score

组件中完成，在

score

组件中更新

score

，并将更新后的数据发送到

Gameboard

组件？

下面是一个极其简单的示例，其中，分数的状态存储在Gameboard中，但要显示。）在记分板上分层并可能添加到

class Gameboard extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      score: 1
    }
  }
  
  add() {
    const newScore = this.state.score + 1;
    this.setState({score:newScore});
  }
  
  render() {
    return (
        <div>
          <Scoreboard score={this.state.score} onAdd={this.add.bind(this)}/>
        </div>
    )
  }
}

class Scoreboard extends React.Component {
  render() {
    return (
      <header>
        <h1>{this.props.score}</h1>
        <button onClick={this.props.onAdd}>add</button>
      </header>
    )
  }
}

ReactDOM.render(<Gameboard />, mountNode);

类游戏板扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
分数：1
}
}
添加（）{
const newScore=this.state.score+1；
this.setState（{score:newScore}）；
}
render（）{
返回(
)
}
}
类记分板扩展React.Component{
render（）{
返回(
{this.props.score}
添加
)
}
}
render（，mountNode）；

---

您可以将该代码输入到中以查看其工作。

游戏板需要知道分数吗？您希望“分数”组件只显示分数还是同时更新它？我想在游戏板中进行条件检查，因此我非常确定游戏板应该知道当前用户分数。我正在考虑创建输入、分数和R的新组件andomNumber，并将它们放在Gameboard组件中，如：，。这样Gameboard组件中就不会有那么多代码。或者我应该制作另一个组件来检查用户是否赢得了游戏？总之，我不知道我应该在Gameboard组件中还是在Score组件中增加分数。老实说，没有kno很难说从字面上看，你要做的每一件事都是正确的。我认为你应该好好玩玩，看看什么是有效的。明智的做法是将组件分为基于表示的组件或具有逻辑并保存数据的组件。我发现，具有逻辑和数据的组件在层次结构中处于较高的位置，而表示组件则处于较低的位置更接近（如果不是）叶级。但是，如果某个更接近叶级的对象负责其自身的逻辑（例如，根据switch语句确定其应显示的图标，而不是向上计算这4个级别并向下传递），则有时它会很方便。为了进一步提取逻辑，您可以使用react-Hooks谢谢您为例。我很确定，如果我放置一个条件检查，分数是否应该更新，在Gameboard组件中增加分数，就像您所做的那样，它不再基于单一责任原则