Реагировать надстройка Typescript Excel и функциональные компоненты

Question

Я создал надстройку Excel, используя генератор office и yeoman со следующей конфигурацией: - дополнение с настройкой React - w / typescript

Код генерируется с помощью классов React. Я хочу использовать функциональные компоненты вместо этого. Когда я заменяю соответствующий код, надстройка ничего не отображает. Нет ошибок нигде. Как ни странно, иногда работают функциональные компоненты.

1. с генератором Yeoman и Office, выполните

yo office

, выберите проект React / Typescript и дайте ему имя(любой подойдет)

введите каталог проекта и запустите npm start

Плагин загружается в Excel

Открыть 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;

Сохраните файл и посмотрите в Excel - надстройка ничего не отображает

Отменить изменения кода

Открытьsrc/taskpane/components/Header.tsx

Измените код на:

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;

Сохраните и загрузите надстройку в Excel => на этот раз надстройка отображается правильно, как на шаге 3

Почему FC.React иногда работает, а иногда нет? Как это отладить?