Javascript Rails/React:存储;“待办事项”;处于React状态的项目?

Javascript Rails/React:存储;“待办事项”;处于React状态的项目?,javascript,ruby-on-rails,reactjs,Javascript,Ruby On Rails,Reactjs,因此,作为第一个React项目,我正在处理React“Todo”列表,我使用Rails作为API后端(严格地说是接收并发送回.json),我对Rails或至少是基础知识相当熟悉 目前,我有几个组件用于处理实际的“列表”。这是一个ListContainer父组件(保存列表数组“Lists”的状态)以及所有Add/Update/Delete/Index(设置列表初始状态)函数 连同一些子组件(ListForm和List),这两个组件都非常简单。List是一个哑组件,只包含列表标题和描述,ListFo

因此,作为第一个React项目,我正在处理React“Todo”列表,我使用Rails作为API后端(严格地说是接收并发送回.json),我对Rails或至少是基础知识相当熟悉

目前,我有几个组件用于处理实际的“列表”。这是一个ListContainer父组件(保存列表数组“Lists”的状态)以及所有Add/Update/Delete/Index(设置列表初始状态)函数

连同一些子组件(ListForm和List),这两个组件都非常简单。List是一个哑组件,只包含列表标题和描述,ListForm是提交新列表的实际表单

我使用的是axios,到目前为止,Create/Index/Update/Delete对于列表来说非常有用。然而,我遇到了不确定如何处理列表项本身的问题。目前在rails侧列表中
有许多
列表项,列表项
属于
列表`

所以rails已经把关系端都搞定了……但是我真的不确定如何处理javascript端的实际项目(对于每个列表)

我最初的猜测是将“列表”哑组件切换到处理状态的智能组件,在这种状态下,将是属于该特定列表的“列表项”数组。加载列表时,我想象axios对组件中列出的项目执行GET请求。然后基本上处理添加/删除/更新,类似于ListContainer组件处理列表的方式(而是将“列表”组件作为ListItems的事实上的容器组件(目前是一个“哑组件”)


这有意义吗?老实说,我还是个新手,所以在前端处理关系是我还不熟悉的事情。但是在一个“属于”的孩子体内存储状态父状态/组件最初最有意义?除非我想得太多了?

我认为您建议的解决方案是有意义的。按照您的模式,您可能会有另一个组件ListItem,您将映射列表中的listItems状态,并为每个项显示ListItem

虽然很多人的学习反应都有过多的组成部分和不同的文件交互的倾向,但在一段时间内,反应社区鼓励了这一点,但是他们已经放弃了这样做。现在很多人都认为有表示成分(或“哑”的成分,正如你所说的)。反模式。例如,请参见Dan Abramov的注释