小编Ale*_*ets的帖子

因此,来自Angular/AngularJS背景,您有状态,每个州都是一个单独的页面.例如,在社交网络中,您可以拥有一个包含您的Feed的状态,一个包含您的朋友列表的州,或一个查看个人资料的州等.非常简单.React对我而言并非如此.

因此,假设我有一个包含2个页面的应用程序:产品列表和单个产品视图.什么是在它们之间切换的最佳方式？

最简单的解决方案是让一个对象,其具有Statename的和是一个布尔

constructor() {
  super();

  this.state = {
    productList: true,
    productView: false
  }
}

然后在render()函数中有类似的东西

return() {
  <div className="App">
    // Or you could use an if statement
    { this.state.productList && <ProductList /> }
    { this.state.productView && <ProductView product={this.state.product} /> }
  </div>
}

很简单,对吧？当然,对于一个2页的应用程序.

但是,如果你有什么用一个大的应用程序10,20,100页？渲染的return()部分会很乱,跟踪每个状态的状态会很疯狂.

我相信应该有更好的方法来整理您的应用.我尝试使用谷歌搜索,但我找不到任何有用的东西(除了使用if else或条件运算符).

我正在使用 Material-UI，并且我正在切换所有导入

import { Button } from "@material-ui/core";

到

import Button from "@material-ui/core/Button";

我想添加一个 lint 规则，不允许从“@material-ui/core”直接导入，但允许任何子文件夹，例如“@material-ui/core/Button”。

我发现了一个“no-restricted-imports”规则应该可以解决这个问题，但我只能限制“@material-ui/core”下的任何内容，因此“@material-ui/core/*”也受到限制。

我尝试了多种方法来设置规则，但所有这些方法都不适用于我的用例。即：

"no-restricted-imports": ["error", "@material-ui/core"]
///////
"no-restricted-imports": ["error", {
    "patterns": ["@material-ui/core"]
}]

但两者都行不通。我是否错过了什么，或者只是无法实现？