Question

我遇到以下错误：

类型'FunctionComponent>和{WrappedComponent：ComponentType <{intl：IntlShape; }＆ISortContainerProps>; }'不可分配给'WrappedComponent >>'类型的参数。类型'FunctionComponent>＆{WrappedComponent：ComponentType <{intl：IntlShape; }＆ISortContainerProps>; }”不可分配给“ WrappedComponentFactory >>”类型。键入'ReactElement ReactElement Component）> | null）| （新（属性：任意）=>组件）> | “ null”不可分配给“ Element”类型。类型“ null”不可分配给类型“元素”。ts（2345）

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

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)
    )
  );

Answer 1

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

export default injectIntl(observer(SortContainer)));

然后在您的呼叫者组件中：

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

并这样称呼它：

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

类型'null'不能分配给类型'Element'.ts（2345）

1 个答案: