javascript - 如何在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 基类(或 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>
);