Question

我知道已经有很多与我相同的问题（例如this one ..）但是我找不到完美的答案。

我必须做什么

反应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：逗号运算符的左侧未使用且没有副作用

我尝试过的事情：

起初，我将第一个.map()结果包装在<div className="accordion">中，但是我的jQuery Accordion小部件有点因此感到烦恼。那让我寻找另一种解决方案。
我尝试仅用简单的<div>包装它，但这绝对是无法正确渲染我的手风琴。
我尝试将其包装在<>中和</>（如this thread的答案
我什至尝试通过安装Babel-cli并导入片段将其用<Fragment></Fragment>包裹起来，但也没有机会。

现在，这给我留下了更多解决方案。呈现效果不佳或存在绝对错误，您对如何呈现我的手风琴而不在div中包装每个项目有任何想法吗？？

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

Answer 1

该问题特定于React15。如另一个答案所解释，可以从render返回一个组件数组以跳过<div>包装。

第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

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

2 个答案: