V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
eromoe
V2EX  ›  React

如何用 react-redux 创建可以自包含的 component ?

  •  
  •   eromoe · 2016-06-21 15:05:36 +08:00 · 2283 次点击
    这是一个创建于 2838 天前的主题,其中的信息可能已经有所发展或是发生改变。
    前一个帖子也说了,现在在做一个 file manager webui , 昨天碰到一些基本的问题都已经解决了,现在卡在一个大问题上。就是自包含 component.

    大家都知道一般的 file manager 左侧都有一个树形的浏览器,我想用一个 component 表示所有的节点,比如这个 conponent 叫 TreeNode 。每个 TreeNode 下面也会有子节点,同样也是 TreeNode , 他们的 state 是 {path, children_nodes, right .....}, 但是内容都不同。 children_nodes 是从服务器拿的, path 是 parent 传给他的(因为 parent 拿到了 children_nodes , 然后 map 到子节点 的时候可以把 path 传给他).

    结构像这样(文件浏览器所以层数不限。。):

    App:
    TreeNode
    --TreeNode
    ----TreeNode
    ----TreeNode
    TreeNode
    TreeNode
    --TreeNode
    TreeNode
    --TreeNode
    ----TreeNode
    ----TreeNode


    我有一个 OPEN_NODE action , 用来触发 getFileList (获取文件列表函数,在 action creator 里),然后把 state.open 设置为 true

    然后现在的问题是,因为只能 connect 根节点 App ,导致所有子节点所接受的 state 都变得一样了。。。

    v2ex 代码显示太恶心了。。还是贴 github 地址吧 https://github.com/eromoe/simple-redux-boilerplate

    关键代码在
    containers/App.js:
    containers/TreeNode.js
    actions/NodeActions.js
    reducers/TreeNodeReducer.js


    现在卡在这里不知道怎么往下做。。。。
    第 1 条附言  ·  2016-06-21 16:19:45 +08:00
    刚刚看到这个 http://stackoverflow.com/questions/20503559/how-to-manage-state-in-a-tree-component-in-reactjs

    解决方法是 直接把 整个 树 传进去。。。对于 file manager 来说 肯定是不可用的。。。
    3 条回复    2016-06-21 16:43:26 +08:00
    SuperMild
        1
    SuperMild  
       2016-06-21 15:36:58 +08:00 via iPad
    可以参考这里 http://blog.zigomir.com/react.js/jquery/2015/01/11/jquery-versus-react-thinking.html
    给每个 TreeNode 加个 id 来控制。
    eromoe
        2
    eromoe  
    OP
       2016-06-21 15:50:50 +08:00
    @SuperMild 他这个只有一层,不是自己嵌套自己,所以没有这个问题。。。
    eromoe
        3
    eromoe  
    OP
       2016-06-21 16:43:26 +08:00
    突然想到 可以 直接传个 完整对象进去。。。只要做个 map {path: children}就好了,不用传整个树
    action 更新这个 map 。。。应该可行
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2885 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:20 · PVG 22:20 · LAX 07:20 · JFK 10:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.