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 に答える