Question

我正在创建一个旅行费用计算器。你告诉它本月你可能在哪里/如何乘坐地铁，它可以帮助你找到最好的票组合。显示的主要结果是最佳选择+价格。

我想让它可扩展，以便如果用户点击总价格，它会打开（用动画）一个表格来解释价格是多少。稍微过分简化，它将类似于以下内容：

< 22 trips a month -> use Ticket class A, it will cost $734 >
   |
   | user clicks on the web or taps on mobile
   |
   v
< 22 trips a month -> use Ticket class A, it will cost $734 >
  - trips 1-10 cost $340 ($34 each)
  - trips 11-20 cost $330 ($33 each)
  - trips 21-22 cost $64 ($32 each)

关于扩展/未扩展，存储状态的好地方是什么？

在整个应用程序状态中，因为它仍然是一个状态，因为其他所有内容并帮助组件变得非常愚蠢 - ＆gt;还可以更轻松地在Web和本机之间移植。

然后点击该行将生成操作，将由reducers处理，并将修改该状态中的某些expanded键。
在组件内部，因为它的低级UI动画与业务逻辑无关，甚至与应用内导航无关。

然后点击将在组件内处理，他们将通过设置CSS类来包装/解包。
有什么不同？

您在应用中使用了什么？对于像这样的情况，是否有一些标准模式？

Answer 1

我相信你的＃2在这里是正确的。通常，与单个组件（打开或关闭，选项卡索引，悬停，动画等）相关的状态应保持在组件级别状态。

您可以使用以下方法设置初始状态：

constructor(props) {
    super(props);
    this.state = {
        expanded: false
    };
}

然后创建一个返回this.setState({ expanded: true )};

的onClick函数

这就是我可能会处理的问题。

Answer 2

我也会说＃2，但我有一个问题，这个布尔状态是否存储在某处（本地存储，...）？然后它将处于全局状态，因为您的初始状态布尔值将从此存储设置

Redux / ReactJS：我应该在哪里存储州的视觉细节？

2 个答案: