无法在 OM 中显示两个组件答案

【问题标题】：Unable to display two components in OM无法在 OM 中显示两个组件
【发布时间】：2014-08-18 08:53:38
【问题描述】：

我正在尝试学习 Om，但遇到了一些我不明白的东西。我希望这段代码

(defn search-page-view [app owner]
(reify
    om/IRender
    (render [_]
      (dom/div #js {:id "search-block"}
                  "Test")
      (dom/div #js {:id "results-block"}
               "Test2"))))
(om/root
 search-page-view app-state
  {:target (. js/document (getElementById "app"))})

生成这个 html：

<div id="app>
  <div id="search-block">
    Test
  </div>
  <div id="results-block">
    Test2
  </div>
</div>

但是，事实并非如此！第一个包含 Test 的div 不显示。我误会了什么？

使用解决方案进行编辑（由 FakeRainBrigand 指出）：

把代码改成

(defn search-page-view [app owner]
  (reify
    om/IRender
    (render [_]
      (dom/div nil
               (dom/div #js {:id "search-block"}
                    "Test")
               (dom/div #js {:id "results-block"}
                    "Test2")))))

产生预期的 html。

【问题讨论】：

我对 OM 不熟悉，但问题很可能是您需要将这两个 div 包装在一个 div 中。这是 React with JSX 的常见问题，因此它可能适用于此。
这正是问题所在。谢谢！
是的，正如@FakeRainBrigand 所说。请记住，您只是为您所代表的每个 dom 元素调用函数。如果没有某种加入 json 或 Javascript 中的连接等，你不能一个接一个地进行两个函数调用——所以你不能在 React 中。这意味着你需要确保你的 render 方法总是在它的根返回一个元素，包含你想要的其他元素。

标签： clojurescript reactjs om

【解决方案1】：

正如 here 和 FakeRainBrigand 所解释的，您的渲染函数必须返回单个可渲染对象。

【讨论】：