Preact中Auxiliary高阶组件创建及内容不显示问题求助

看起来你遇到的问题是Preact无法正确渲染Aux组件包裹的多个子元素，这是因为Preact对组件返回多个子元素（数组形式）的处理有特定要求。下面是具体的解决方案和原因分析：

解决方案1：改用Preact的Fragment组件实现Aux #

修改你的Aux组件，使用Preact内置的Fragment来包裹子元素，它不会在DOM中生成额外的节点：

import { Fragment } from 'preact';

const Aux = (props) => <Fragment>{props.children}</Fragment>;
export default Aux;

解决方案2：直接使用Fragment短语法（更简洁） #

如果你的项目支持JSX的Fragment短语法（Preact v10+默认支持），可以完全去掉Aux组件，直接在Layout中使用<>和</>：

import { h } from 'preact';

const Layout = (props) => (
  <>
    <div> Toolbar, Sidebar, Backdrop </div>
    <div> { props.children } </div>
  </>
);
export default Layout;

问题原因分析 #

你原始的Aux组件直接返回props.children，而这里的props.children是两个<div>元素组成的数组。在Preact中，组件如果直接返回数组形式的子元素，每个元素必须带有唯一的key属性，否则Preact无法正确识别和渲染它们。而用<div>包裹时，子元素变成了单个节点，所以能正常渲染。

Fragment的作用就是作为一个"无实体"的容器，包裹多个子元素，同时不需要添加额外的DOM节点，完美解决了你不想出现多余div的需求。

内容的提问来源于stack exchange，提问作者Anand Gupta