我使用office生成器和yeoman通过以下配置创建了一个Excel加载项： -带有React设置的插件 -带打字稿

代码由React类生成。我想改用功能组件。当我替换相关代码时，该加载项不会呈现任何内容。任何地方都没有错误。 足够奇怪，有时功能组件可以正常工作。

1. 与yeoman和office生成器一起使用

yo office

在交互式外壳中，选择一个React / Typescript项目并为其命名（任何人都可以）

1. 进入项目目录并运行npm start

2. 插件在Excel中加载

3. 打开src/taskpane/components/HeroList.tsx并将代码更改为：

import * as React from "react";

export interface HeroListItem {
  icon: string;
  primaryText: string;
}

export interface HeroListProps {
  message: string;
  items: HeroListItem[];
}

const HeroList: React.FC<HeroListProps> = props => {
  // render() {
  const { children,items,message } = props;

  const listItems = items.map((item,index) => (
    <li classname="ms-ListItem" key={index}>
      <i classname={`ms-Icon ms-Icon--${item.icon}`}></i>
      <span classname="ms-font-m ms-fontColor-neutralPrimary">{item.primaryText}</span>
    </li>
  ));
  return (
    <main classname="ms-welcome__main">
      <h2 classname="ms-font-xl ms-fontWeight-semilight ms-fontColor-neutralPrimary ms-u-slideupIn20">{message}</h2>
      <ul classname="ms-List ms-welcome__features ms-u-slideupIn10">{listItems}</ul>
      {children}
    </main>
  );
  // }
};

export default HeroList;

1. 保存文件并查看Excel-加载项不显示任何内容

2. 还原代码更改

3. 打开src/taskpane/components/Header.tsx

4. 将代码更改为：

import * as React from "react";

export interface HeaderProps {
  title: string;
  logo: string;
  message: string;
}

const Header: React.FC<HeaderProps> = ({ title,logo,message }) => {
  return (
    <section classname="ms-welcome__header ms-bgColor-neutralLighter ms-u-fadeIn500">
      <img width="90" height="90" src={logo} alt={title} title={title} />
      <h1 classname="ms-fontSize-su ms-fontWeight-light ms-fontColor-neutralPrimary">{message}</h1>
    </section>
  );
};

export default Header;

1. 在Excel中保存并加载加载项=>这次加载项呈现的与步骤3一样正确

为什么FC.React有时起作用而有时却不起作用？如何调试呢？