Блог

Впервые вижу подобную ошибку, поэтому, пожалуйста, потерпите меня.

Я работал над проектом и открыл один файл, чтобы внести изменения. Я открыл файл, фактически не внес никаких изменений и просто отформатировал файл, используя Prettier.

Прямо при форматировании проект выдал ошибку ниже:

 TypeScript error in C:/Users/name/source/repos/UsedEquipment/src/pages/listings/sections/SearchResultListings.tsx(253,16):
Type '{ style: { height: string; }; type: "rect"; ready: false; showLoadingAnimation: true; }' is not assignable to type '(IntrinsicAttributes amp; CommonProps amp; { color?: string | undefined; rows?: number | undefined; showLoadingAnimation?: boolean | undefined; customPlaceholder?: undefined; } amp; Pick<...> amp; { ...; } amp; { ...; }) | ... 4 more ... | (IntrinsicAttributes amp; ... 2 more ... amp; { ...; })'.
  Property 'children' is missing in type '{ style: { height: string; }; type: "rect"; ready: false; showLoadingAnimation: true; }' but required in type 'CommonProps'.  TS2322
 

Вот код, в котором возникает ошибка:

 showPlaceholders() {
    let items: Object[] = [];
    for (let i = 0; i < ITEMSPERPAGE; i  ) {
      //show # of placeholders
      items.push(
        <div
          className="productwrap col-xs-12 col-sm-4 col-md-4 col-lg-3 placeholder"
          key={i}
        >
          <div className="product-wrapper">
            <div className="product-image">
              <ReactPlaceholder
              ^ Error thrown here
                style={{ height: "180px" }}
                type="rect"
                ready={false}
                showLoadingAnimation={true}
              ></ReactPlaceholder>
            </div>
            <div className="product-info-column">
              <ReactPlaceholder
              ^ Error thrown here
                type="text"
                rows={6}
                ready={false}
                showLoadingAnimation={true}
              ></ReactPlaceholder>
            </div>
          </div>
        </div>
      );
    }
    return items;
  }
 

Я не совсем уверен, что означает эта ошибка или как ее исправить. Есть идеи?

Заполнитель React ожидает один дочерний компонент. Передайте любой допустимый html-тег внутри него.

 <ReactPlaceholder { /*...your other optional props */ }>
  <MyComponent /> {/* this is mandatory */ }
</ReactPlaceholder>