如何在preact中创建辅助（高阶组件）？

Question

我正在尝试使用preact构建一个应用程序，我创建了一个名为LayoutComponent的简单组件。

在布局组件中，我使用了Auxilary组件，如下所示：

import { h } from 'preact';
import Aux from '../../hoc/Aux';
const Layout = (props) => (
    <Aux>
        <div>
        Toolbar, Sidebar, Backdrop
        </div>
        <div>
            { props.children }
        </div>
    </Aux>
);
export default Layout;

下面提到的是我的Auxilary组件代码：

const Aux = ( props ) => props.children;
export default Aux;

当我从App.js render（）方法调用LayoutComponent时，标记内的JSX内容不会显示。

如果我用标签替换标签，那么它工作正常，但我的DOM结构中不需要额外的div。

如果我使用Aux标签，则在chrome中显示类似这样的DOM。

请帮助。

Answer 1

问题是组件必须返回一个直接子项。在React中，最近通过引入Fragments解决了这个问题，但此功能目前还在Preact中not supported。 如果您确定该组件只有一个子组件，则可以这样插入：

const Aux = (props) =>
  props.children.length === 1 && props.children[0];

但是，由于您要在示例中插入两个子项，因此唯一的方法是将它们包装在div或任何其他标记中，如下所示：

const Aux = (props) => (
  <div>
    { props.children }
  </div>
);

Answer 2

const aux = (props) => props.children;
export default aux;

只有两行！ ：D