如何在CxJS中制作功能组件？

Question

如果我们可以将多个Cx组件组合成一个功能组件，该组件接受多个参数作为JSX属性，并且可以有自己的嵌套(子)组件，这将是非常有帮助的。

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

在创建自定义Cx组件时，通常我们需要创建一个类来扩展一些基本组件并实现某些预定义的方法，这会增加过程的复杂性。

以下是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方法。我希望能够使用类似的东西来使用React的无状态功能组件，如下所示：

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允许混合使用React组件和CxJS组件，因此您的第二个示例应该可以工作，只是您应该使用props.loading而不是data.loading。React组件可以定义为功能性的无状态组件，也可以定义为扩展基础React.Component类的ES6类(或CxJS中的VDOM.Component )。

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>
);