React SPFx web part中map使用index无输出、修改后报语法错误如何解决？

第一个版本无内容输出的原因 #

你在map的回调中使用了花括号包裹函数体的写法，但没有显式加return关键字返回JSX，所以所有迭代都返回undefined，自然没有内容渲染。
你移除索引判断时用的是圆括号包裹JSX，属于React的隐式返回写法，所以可以正常渲染。

第二个版本语法错误的原因 #

1. 同样没有加显式return返回JSX
2. 回调内部多余嵌套了一层花括号，不符合JSX语法规则
3. 试图将<tr>的开始和结束标签拆分到不同的map迭代中，既会导致DOM结构非法，语法层面也不支持这种写法
4. key属性放在了子元素<a>上，React要求key必须放在map返回的最外层元素上

修正建议 #

• 优先遵循map回调的返回规则：用花括号包裹逻辑时必须显式写return，用圆括号包裹JSX可以省略return隐式返回
• 不要跨map迭代拼接DOM元素，每个迭代返回的必须是完整、合法的JSX元素
• 如果你需要实现首条新闻跨2行、和第二条新闻同属一行的布局，不要通过map逐元素返回，建议直接按索引取对应数据拼接结构，避免结构混乱

参考修正代码（核心逻辑） #

export default class SingleNews extends React.Component<INews, {}> {
  public render(): React.ReactElement<INews> {
    return (
      <>
        <table>
          {this.props.featured ? (
            <>
              {/* 前两条新闻放在同一行，第一条td跨2行 */}
              {this.props.recentNews.length >= 2 && (
                <tr key={`news-row-1`}>
                  <td rowSpan={2}>
                    <a
                      className={styles.singleNews}
                      href={this.props.recentNews[0].link}
                    >
                      <div
                        className={styles.singleNews__image}
                        style={{ backgroundImage: `url(${this.props.recentNews[0].image})` }}
                      />
                      <div className={styles.singleNews__content}>
                        <div className={styles.singleNews__content__info}>
                          <span className={styles.singleNews__content__info__label}>{this.props.recentNews[0].Featured}</span>
                          <span className={styles.singleNews__content__info__date}>
                            {this.props.recentNews[0].date}
                          </span>
                        </div>
                      </div>
                      <div className={styles.singleNews__content}>
                        <div className={styles.singleNews__content__info}>
                          <h2 className={styles.singleNews__content__info__title}>
                            {this.props.recentNews[0].Title}
                          </h2>
                          {this.props.recentNews[0].likes ? (
                            <div
                              className={styles.singleNews__content__info__reactions}
                            >
                              <span
                                className={
                                  styles.singleNews__content__info__reactions__likes
                                }
                              >
                                <Icon iconName='Like' />
                                {this.props.recentNews[0].likes}
                              </span>
                              <span>
                                <Icon iconName='ActionCenter' />
                                {this.props.recentNews[0].coments}
                              </span>
                            </div>
                          ) : null}
                        </div>
                      </div>
                    </a>
                  </td>
                  <td>
                    <a
                      className={styles.singleNews}
                      href={this.props.recentNews[1].link}
                    >
                      <div
                        className={styles.singleNews__image}
                        style={{ backgroundImage: `url(${this.props.recentNews[1].image})` }}
                      />
                      <div className={styles.singleNews__content}>
                        <div className={styles.singleNews__content__info}>
                          <span className={styles.singleNews__content__info__label}>{this.props.recentNews[1].Featured}</span>
                          <span className={styles.singleNews__content__info__date}>
                            {this.props.recentNews[1].date}
                          </span>
                        </div>
                      </div>
                      <div className={styles.singleNews__content}>
                        <div className={styles.singleNews__content__info}>
                          <h2 className={styles.singleNews__content__info__title}>
                            {this.props.recentNews[1].Title}
                          </h2>
                          {this.props.recentNews[1].likes ? (
                            <div
                              className={styles.singleNews__content__info__reactions}
                            >
                              <span
                                className={
                                  styles.singleNews__content__info__reactions__likes
                                }
                              >
                                <Icon iconName='Like' />
                                {this.props.recentNews[1].likes}
                              </span>
                              <span>
                                <Icon iconName='ActionCenter' />
                                {this.props.recentNews[1].coments}
                              </span>
                            </div>
                          ) : null}
                        </div>
                      </div>
                    </a>
                  </td>
                </tr>
              )}
              {/* 第三条新闻单独一行 */}
              {this.props.recentNews.length >=3 && (
                <tr key={`news-row-2`}>
                  <td>
                    <a
                      className={styles.singleNews}
                      href={this.props.recentNews[2].link}
                    >
                      <div
                        className={styles.singleNews__image}
                        style={{ backgroundImage: `url(${this.props.recentNews[2].image})` }}
                      />
                      <div className={styles.singleNews__content}>
                        <div className={styles.singleNews__content__info}>
                          <span className={styles.singleNews__content__info__label}>{this.props.recentNews[2].Featured}</span>
                          <span className={styles.singleNews__content__info__date}>
                            {this.props.recentNews[2].date}
                          </span>
                        </div>
                      </div>
                      <div className={styles.singleNews__content}>
                        <div className={styles.singleNews__content__info}>
                          <h2 className={styles.singleNews__content__info__title}>
                            {this.props.recentNews[2].Title}
                          </h2>
                          {this.props.recentNews[2].likes ? (
                            <div
                              className={styles.singleNews__content__info__reactions}
                            >
                              <span
                                className={
                                  styles.singleNews__content__info__reactions__likes
                                }
                              >
                                <Icon iconName='Like' />
                                {this.props.recentNews[2].likes}
                              </span>
                              <span>
                                <Icon iconName='ActionCenter' />
                                {this.props.recentNews[2].coments}
                              </span>
                            </div>
                          ) : null}
                        </div>
                      </div>
                    </a>
                  </td>
                </tr>
              )}
            </>
          ) : null}
        </table>
      </>
    );
  }
}

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