React 16.2.0中Fragment内组件无法渲染且无报错，请求协助

首先，你的核心问题出在HTML元素的规范限制，再加上代码里的几处小疏漏，导致Fragment内的组件无法正常渲染：

1. <ul>的子元素必须是<li>（最关键原因） #

你在<ul>中直接渲染了TableBody组件，而TableBody返回的Fragment里的内容（BodyHeader和BodyComponent）并不是<li>标签。虽然React的Fragment不会生成额外的DOM节点，但浏览器会严格遵循HTML规范——<ul>的直接子元素只能是<li>，不符合规范的元素会被浏览器自动移出<ul>容器，最终导致你看不到渲染结果。

2. TableBody未收到index属性 #

在TablePage遍历items渲染TableBody时，你只传递了dataSet，但TableBody里的BodyHeader组件需要用到this.props.index，这个属性根本没传，会导致index为undefined，也可能间接影响组件渲染。

修复后的代码示例 #

第一步：修正<ul>的子元素结构 #

把TableBody返回的内容包裹在<li>中，确保符合<ul>的规范：

class TableBody extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {dataSet, index} = this.props; // 从props解构出index
    const BodyHeader = (props) => {
      const Header = HeaderComponents.BodyHeader;
      return <Header index={props.index}/>; // 使用props传入的index
    };
    return (
      <li key={index}> {/* 给列表项添加合法的<li>容器 */}
        <BodyHeader index={index}/>
        <BodyComponent itemList={dataSet.content}/>
      </li>
    );
  }
}

第二步：在TablePage中传递index属性 #

// 修改TablePage里的map渲染逻辑
{ items.map((item, i) => {
  return <TableBody dataSet={item} key={i} index={i}/>; // 传递index给TableBody
}) }

额外补充：定义缺失的变量 #

你的TablePage中直接使用了status和items变量，但代码里没有定义，要确保这些变量是从组件props中获取的：

render() {
  const { status, items } = this.props; // 从props解构所需变量
  // ... 剩余渲染逻辑
}

为什么简单Fragment示例也不生效？ #

如果你在<ul>里直接渲染：

<Fragment>
  <p>foo</p>
  <p>bar</p>
</Fragment>

同样会因为<p>不是<ul>的合法子元素被浏览器移出，所以看不到效果。你需要把内容放在<li>里：

<Fragment>
  <li><p>foo</p></li>
  <li><p>bar</p></li>
</Fragment>

内容的提问来源于stack exchange，提问作者Sarani Mendis