Question

我在某处读到，在大多数父组件中都具有状态是一种好习惯或普遍做法，但是大多数父组件是App，对吗？好吧，在某些情况下，您不需要在App组件中拥有状态。我想知道在App组件中添加状态是个好主意还是React开发人员通常会做的事情。

之所以这样问，是因为在我当前正在构建的应用程序中，我可能需要将状态提升到最主要的父组件（App），以便能够将数据传递给所有子组件。但是，这样做意味着我还需要进行2级嵌套，例如：

class App extendes Component {
 render() {
 <React.Fragment>
  <main className="container">
    <FirstLevel data={this.state.mainData} moreData={this.state.moreData} />
  </main>
</React.Fragment>
 }
}

FirstLevel组件还有另一个组件，该组件也需要来自状态的数据：

const FirstLevel = props => {
 return (
  <div>
   <p>This is first level child</p>
    <SecondLevel moreData={this.props.moreData} />
  </div>
 );
}

很容易看到为什么这里的东西会变得凌乱，我使用Sass，我知道我们不应该超出3级嵌套。我想知道在React中什么级别的嵌套会被认为是不好的做法，或者上面的示例是否还可以，但是我不应该嵌套得更深。

Answer 1

不建议在一级嵌套之后传递道具。有诸如Redux，Mobx之类的库。我个人使用Redux，因为您可以全局管理整个应用程序状态，而不必担心组件的层次结构。通过提供Context API和Provider概念，最新的反应Consumer已经可以解决道具钻探问题。

React-嵌套级别以传递数据

1 个答案: