React 和 TypeScript - 如何在不包装父 div 的情况下进行渲染？

Question

我知道已经有很多和我一样的问题了（比如this one..） 但我找不到完美的答案。

我必须做什么

React v.15.6.2

我必须使用 JQuery Accordion 呈现按类别排序的几个元素，如下图所示：

这是我的渲染函数：

public render():React.ReactElement<{}>{
  return (
    <div className={styles.extensionContainer}>
    /* TONS OF DIV WITH CONTENT*/
    <div className="accordion">
       {this.state.items.map((item:CategoryArray)=>
          <h3>{item.CategoryName}</h3>
          <div className={styles.answers}>
              {item.Items.map((x)=> 
                  <h3>{x.ItemTitle}</h3>
                  <div className={styles.answer} dangerouslySetInnerHTML={{__html: x.ItemAnswer}}></div>
               )}
          </div>
        )}
    </div>
    </div>

  );
}

但不幸的是，它无法正常工作，并且构建会引发以下错误：

错误 TS2657：JSX 表达式必须有一个父元素。 错误 TS2695 : 逗号运算符的左侧未使用且没有副作用

我尝试了什么：

1. 起初，我将我的第一个 .map() 结果包装成 <div className="accordion">，但我的 jQuery Accordion 小部件有点 因此被窃听。这促使我寻找另一种解决方案。
2. 我试图只用一个简单的<div> 来包装它，但它绝对是 没有正确渲染我的手风琴。
3. 我试图把它包裹在<> 和</>（如this thread的答案中所述
4. 我什至尝试通过安装 Babel-cli 并导入 Fragment 来用 <Fragment></Fragment> 包装它，但也没有机会。

现在这让我没有更多的解决方案了。渲染不好，或者绝对错误，您对如何在不将每个项目都包装在 div 中的情况下渲染我的手风琴有任何想法吗？？

非常感谢！祝你有美好的一天！

Answer 1

问题是 React 15 特有的。可以从 render 返回一个组件数组以跳过 <div> 包装器，正如另一个答案所解释的那样。

React 16 具有 <> 和 Fragment 组件，允许对多个组件进行分组。并非所有工具都支持<>，而Fragment can be polyfilled in React 15。

这里是an example：

import { Fragment } from "react-dot-fragment";

...

  <div className="accordion">
    {this.state.items.map((item: CategoryArray) => (
      <Fragment>
        {console.warn(item)}
        <h3>{item.CategoryName}</h3>
        <div>
          {item.Items.map(x => (
            <Fragment>
              <h3>{x.ItemTitle}</h3>
              <div dangerouslySetInnerHTML={{ __html: x.ItemAnswer }} />
            </Fragment>
          ))}
        </div>
      </Fragment>
    ))}
  </div>
);

Answer 2

你可以使用数组

  {this.state.items.map((item:CategoryArray)=> {
    return [<h3>{item.CategoryName}</h3>,
    <div className={styles.answers}>
          {item.Items.map((x)=> {
              return [<h3>{x.ItemTitle}</h3>,
              <div className={styles.answer} dangerouslySetInnerHTML={{__html: x.ItemAnswer}}></div>];
           })}
    </div>];
  })}

demo