4

是否可以编写一个不呈现任何内容的组件，例如，如果它的光标数据为空？

我不能做

(defn count-or-nothing [list-cursor owner]
  (reify
    om/IRender
    (render [_]
       (if (not (empty? list-cursor))
         (dom/div nil "You have some elements !")))))

if 子句返回 nil，这会导致错误消息

未捕获的错误：不变违规：ReactCompositeComponent.render()：必须返回有效的 ReactComponent。您可能返回了 null、未定义、数组或其他一些无效对象。

我通过渲染一个空的跨度来度过难关，但这听起来很笨拙。我是否必须重构我的代码并从这个组件中“退出”测试？

4

2 回答 2

6

我对为什么不能这样做的理解是因为 React 需要跟踪 DOM 中的组件，并通过向节点添加 react-id 属性来做到这一点。如果你渲染“什么都没有”，那么 React 不知道如何将它挂载到 DOM 中（它实际上是卸载的）。由于您不能安装未安装的组件，因此不允许这样做。

解决方案是让非空状态成为它自己的组件，然后让 PARENT 有条件地构建该组件。这样，如果您不想渲染任何内容，它会卸载组件并且.. 不渲染任何内容。

(defn something-interesting [list-cursor owner]
  (reify
    om/IRender
    (render [_]
      (dom/div nil "You have some elements !"))))

(defn count-or-nothing [list-cursor owner]
  (reify
    om/IRender
    (render [_]
      (dom/div nil
        ; Other UI stuff here maybe...
        (when-not (empty? list-cursor)
          (om/build something-interesting list-cursor))))))
于 2014-07-04T00:34:38.440 回答
1

所以答案是：你做不到。

我会将其标记为Unable to display two components in OM的副本 ，但这个问题没有答案......

[编辑] 修复了问题链接

于 2014-07-03T15:03:37.440 回答