类型“null”不可分配给类型“元素”.ts(2345)答案

【问题标题】：Type 'null' is not assignable to type 'Element'.ts(2345)类型“null”不可分配给类型“元素”.ts(2345)
【发布时间】：2020-03-08 00:26:00
【问题描述】：

我收到以下错误：

类型参数'FunctionComponent> & { WrappedComponent: ComponentType; }' 不可分配给“WrappedComponent>>”类型的参数。类型 'FunctionComponent> & { WrappedComponent: ComponentType; }' 不可分配给类型 'WrappedComponentFactory>>'。键入'ReactElement ReactElement 组件）> |空） | （新（道具：任何）=> 组件）> | null' 不可分配给类型“元素”。类型“null”不可分配给类型“元素”.ts(2345)

我正在尝试使用来自react-sortable-hoc 的SortableContainer 包装我的列表并将其导出。我的组件是：

class SortContainer extends React.Component<{ intl: IntlShape } & ISortContainerProps, {}> {

  public render() {

    ...

    return (
      <Row className={style.sortableList}>
        <List striped>
          <List.Header
            name={formatMessage(messages.detailsType)}
            width={2}
          />
          ...
          {
            items &&
            !!items.length &&
            items.map((item, index) => {
              return (
                <React.Fragment key={`detailsRowId__${index}`}>
                ...
                </React.Fragment>
              );
            })
          }
        </List>
      </Row>
    );
  }
}

export default
  SortableContainer(
    injectIntl(
      observer(SortContainer)
    )
  );

【问题讨论】：

标签： jquery reactjs typescript

【解决方案1】：

为什么不使用 HOC SortableContainer 导出您的列表，然后将其包装在this example 中使用的位置

export default injectIntl(observer(SortContainer)));

然后在你的调用者组件中：

const SortableList = SortableContainer<any>(({ children }) => <div>{children}</div>);

然后这样称呼它：

<SortableList onSortEnd={this.onSortEnd}>
    <SortContainer
        ...
    />
</SortableList>

【讨论】：