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

【问题标题】：How to make functional components in CxJS?如何在 CxJS 中制作功能组件？
【发布时间】：2017-06-30 13:52:33
【问题描述】：

如果我们可以将多个 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 中可行吗？

【问题讨论】：

标签： javascript reactjs cxjs

【解决方案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>
);

【讨论】：

这太棒了！非常感谢！