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

Posted 2023-03-10

【中文标题】类型“null”不可分配给类型“元素”.ts(2345)

【英文标题】：Type 'null' is not assignable to type 'Element'.ts(2345)

【发布时间】：2020-03-08 00:26:00

【问题描述】：

我收到以下错误：

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

我正在尝试使用来自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)
    )
  );

【参考方案1】：

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

export default injectIntl(observer(SortContainer)));

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

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

然后这样称呼它：

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