CxJSで機能コンポーネントを作成する方法は？

Question

複数のCxコンポーネントを1つの機能コンポーネントにまとめて、複数のパラメータをJSX属性として受け入れ、独自のネストされた（子）コンポーネントを持つことができれば、本当に役に立ちます。カスタムCxのコンポーネントを作成する場合

<LoadingOverlay loading={bind('$page.loading')} > 
    <Grid /> 
</LoadingOverlay/> 

、通常、我々は、基本コンポーネントの一部を拡張し、プロセスが複雑に特定の事前定義された方法を実装するクラスを作成する必要があります。ここ

はLoadingOverlayの一つの可能​​な実装である：上記の例で

class LoadingOverlay extends PureContainer { 

    declareData() { 
     super.declareData(...arguments, { 
      loading: undefined 
     }); 
    } 

    render (context, instance, key) { 
     let {data} = instance; 
     return <div key={key} className="cxb-loading-overlay-container"> 
      {this.renderChildren(context, instance)} 
      {data.loading && <div className="cxe-loading-overlay"> 
       <div className="cxe-loading-indicator"> 
        {Icon.render('loading', { 
          style: { 
           width: '24px', 
           height: '24px', 
           position: 'relative', 
           top: '6px' 
          } 
         }) 
        } 
        Loading... 
       </div> 
      </div>} 
     </div>; 
    } 
} 

、LoadingOverlayがPureContainerから継承しdeclareDataとrenderメソッドを実装しなければなりませんでした。 そして、私はこのような者のステートレス機能性成分を反応させることsimmilar何か、使用できるようにしたいと思います：

const LoadingOverlay = (props) => { 

    return <div className="cxb-loading-overlay-container"> 
     {props.children} 
     {data.loading && <div className="cxe-loading-overlay"> 
      <div className="cxe-loading-indicator"> 
       {Icon.render('loading', { 
         style: { 
          width: '24px', 
          height: '24px', 
          position: 'relative', 
          top: '6px' 
         } 
        }) 
       } 
       Loading... 
      </div> 
     </div>} 
    </div>; 

} 

はCxJSに、このことは可能ですか？

Answer 1

CxJSは、反応成分とCxJS成分を混合することができるので、data.loadingの代わりにprops.loadingを使用する以外は、2番目の例が有効です。 リアクションコンポーネントは、機能的なステートレスコンポーネント、またはベースのReact.Componentクラス（またはCxJSのVDOM.Component）を拡張するES6クラスとして定義できます。

CxJSは最近CxJS functional componentsのサポートを得て、それはおそらく、この例のために最良の選択である：

const LoadingOverlay = ({ loading, children }) => (
    <cx> 
    <div className="cxb-loading-overlay-container"> 
     {children} 
     <div className="cxe-loading-overlay" visible={loading}> 
     <div className="cxe-loading-indicator" ws> 
      <Icon 
      name="loading" 
      style="width:24px;height:24px;position:relative;top:6px"       
      /> 
      Loading... 
     </div> 
     </div> 
    </div>; 
    </cx> 
);