Reactjs 为什么react-sortable hoc basic示例无法使用typescript编译？

下面是来自的基本示例

import React，{Component}来自'React'；
从'react dom'导入{render}；
从'react sortable hoc'导入{SortableContainer，SortableElement，arrayMove}；
const SortableItem=SortableElement（（{value}）=>
{value}
);
const SortableList=SortableContainer（（{items}）=>{
返回(

{items.map（（值，索引）=>(
))}

);
});
类SortableComponent扩展了组件{
状态={
项目：[‘项目1’、‘项目2’、‘项目3’、‘项目4’、‘项目5’、‘项目6’]，
};
onSortEnd=（{oldIndex，newIndex}）=>{
这是我的国家({
items:arrayMove（this.state.items、oldIndex、newIndex），
});
};
render（）{
返回；
}
}
render（，document.getElementById（'root'））；

我不得不稍微修改上面的代码以适应typescript导入语法，下面的屏幕截图显示了我不确定如何修复的错误：

以下是与上述屏幕截图对应的代码：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

ReactDOM.render(<SortableComponent/>, document.getElementById('root'));

import*as React from'React'；
从“react dom”导入*作为react dom；
从'react sortable hoc'导入{SortableContainer，SortableElement，arrayMove}；
const SortableItem=SortableElement（（{value}）=>
{value}
);
const SortableList=SortableContainer（（{items}）=>{
返回(

{items.map（（值，索引）=>(
))}

);
});
类SortableComponent扩展了React.Component{
状态={
项目：[‘项目1’、‘项目2’、‘项目3’、‘项目4’、‘项目5’、‘项目6’]，
};
onSortEnd=（{oldIndex，newIndex}）=>{
这是我的国家({
items:arrayMove（this.state.items、oldIndex、newIndex），
});
};
render（）{
返回；
}
}
ReactDOM.render（，document.getElementById（'root'））；

我不知道如何解析这些错误的错误文本。由于这个项目在GitHub上有5k+个星星，我想我有一些配置问题，但我似乎不知道它是什么

以下是剩下的两个错误：

一,

[ts]属性“items”不存在于类型“IntrinsicattAttributes”上& 内在类属性 二,

[ts]属性“value”在类型“IntrinsicattAttributes”上不存在& 内在类属性 在我看来，错误文本好像没有正确地提取组件包装语法，但我自己不熟悉这种语法，因此我不确定是否正确地诊断了问题或如何修复它

---

感谢您的帮助。

文档中基本示例中的代码是JavaScript

下面是转换为TypeScript的基本示例：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { arrayMove, SortableContainer, SortableElement } from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}: {value: string}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}: {items: string[]}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component<{}, {items: string[]}> {
  constructor(props: {}) {
    super(props);
    this.state = {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
    }
  }
  public render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
  private onSortEnd = ({oldIndex, newIndex}: {oldIndex: number, newIndex: number}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
}

ReactDOM.render(<SortableComponent/>, document.getElementById('root'));

import*as React from'React'；
从“react dom”导入*作为react dom；
从'react-sortable-hoc'导入{arrayMove，SortableContainer，SortableElement}；
const SortableItem=SortableElement（（{value}:{value:string}）=>
{value}
);
const SortableList=SortableContainer（（{items}:{items:string[]}）=>{
返回(

{items.map（（值，索引）=>(
))}

);
});
类SortableComponent扩展了React.Component{
构造函数（props:{}）{
超级（道具）；
此.state={
项目：[‘项目1’、‘项目2’、‘项目3’、‘项目4’、‘项目5’、‘项目6’]
}
}
公共渲染（）{
返回；
}
private onSortEnd=（{oldIndex，newIndex}:{oldIndex:number，newIndex:number}）=>{
这是我的国家({
items:arrayMove（this.state.items、oldIndex、newIndex），
});
};
}
ReactDOM.render（，document.getElementById（'root'））；

如果有人需要我在ts中使用mui的可选拖动手柄的代码，我还提供了“packageData”示例，如果您需要查看界面，请告诉我

import React, { Component } from 'react';
import {
  SortableContainer,
  SortableElement,
  SortableHandle
} from 'react-sortable-hoc';
import arrayMove from 'array-move';
import { packageData } from '../../data/packagesData';
import { List } from '@material-ui/core';
import ListItem from '../../components/UI/ListItem/ListItem';
import EditIcon from '@material-ui/icons/DragIndicator';
import { PackageResAdmin } from '../../ts/apiTs';

const DragHandle = SortableHandle(() => <EditIcon />);

const SortableItem = SortableElement(
  ({ id, galleryId, translations }: PackageResAdmin) => (
    <ListItem
      id={id}
      children={<DragHandle />}
      galleryId={galleryId}
      translations={translations}
    />
  )
);
const SortableContainerWrapper = SortableContainer(
  ({ children }: { children: {}[] }) => {
    return <List>{children}</List>;
  }
);

class DndComponent extends Component {
  state = { packageData };

  private onSortEnd = ({
    oldIndex,
    newIndex
  }: {
    oldIndex: number;
    newIndex: number;
  }) => {
    this.setState({
      packageData: arrayMove(this.state.packageData, oldIndex, newIndex)
    });
  };

  render() {
    console.log(this.state);
    return (
      <SortableContainerWrapper onSortEnd={this.onSortEnd} useDragHandle>
        {this.state.packageData.map((res, index) => (
          <SortableItem
            key={`item-${index}`}
            index={index}
            id={res.id}
            galleryId={res.galleryId}
            translations={res.translations}
          />
        ))}
      </SortableContainerWrapper>
    );
  }
}

export default DndComponent;


export const packageData: PackageResAdmin[] = [


{
    galleryId: 1,
    id: 1,
    translations: {
      [Language.CS]: {
        additionalInfo: 'additionalInfo',
        content: 'content',
        language: Language.CS,
        parentId: 1,
        title: 'eden'
      },
      [Language.EN]: {
        additionalInfo: 'additionalInfo',
        content: 'content',
        language: Language.EN,
        parentId: 1,
        title: 'one'
      }
    }
  },
  {
    galleryId: 1,
    id: 2,
    translations: {
      [Language.CS]: {
        additionalInfo: 'additionalInfo',
        content: 'content',
        language: Language.CS,
        parentId: 1,
        title: 'dva'
      },
      [Language.EN]: {
        additionalInfo: 'additionalInfo',
        content: 'content',
        language: Language.EN,
        parentId: 1,
        title: 'two'
      }
    }
  }
];

import React，{Component}来自'React'；
进口{
可分拣集装箱，
可排序元素，
可分拣手柄
}来自“react sortable hoc”；
从“数组移动”导入arrayMove；
从“../../data/packagesData”导入{packageData}；
从'@material ui/core'导入{List}；
从“../../components/UI/ListItem/ListItem”导入ListItem；
从“@material ui/icons/DragIndicator”导入编辑图标；
从“../../ts/apiTs”导入{PackageResAdmin}；
const DragHandle=可排序句柄（（）=>）；
const SortableItem=SortableElement(
（{id，galleryId，translations}:PackageResAdmin）=>(
)
);
const sortableContainerRapper=SortableContainer(
（{children}:{children:{}[]}）=>{
返回{children}；
}
);
类DndComponent扩展组件{
状态={packageData}；
private onSortEnd=({
旧索引，
新索引
}: {
oldIndex：编号；
新索引：编号；
}) => {
这是我的国家({
packageData:arrayMove（this.state.packageData、oldIndex、newIndex）
});
};
render（）{
console.log（this.state）；
返回(
{this.state.packageData.map（（res，index）=>(
))}
);
}
}
导出默认的DndComponent；
导出常量packageData:PackageResAdmin[]=[
{
加列利德：1，
id:1，
翻译：{
[Language.CS]：{
additionalInfo:“additionalInfo”，
内容：“内容”，
语言：language.CS，
父ID:1，
标题：“伊甸园”
},
[Language.EN]：{
additionalInfo:“additionalInfo”，
内容：“内容”，
语言：language.EN，
父ID:1，
标题：“一”
}
}
},
{
加列利德：1，
id:2，
翻译：{
[Language.CS]：{
additionalInfo:“additionalInfo”，
内容：“内容”，
语言：language.CS，
父ID:1，
标题：“dva”
},
[Language.EN]：{
additionalInfo:“additionalInfo”，
内容：“内容”，
语言：language.EN，
父ID:1，
标题：“两个”
}
}
}
];

图像和屏幕截图可以很好地添加到帖子中，但请确保没有它们的帖子仍然清晰有用。如果您发布代码图像或错误消息

import React, { Component } from 'react';
import {
  SortableContainer,
  SortableElement,
  SortableHandle
} from 'react-sortable-hoc';
import arrayMove from 'array-move';
import { packageData } from '../../data/packagesData';
import { List } from '@material-ui/core';
import ListItem from '../../components/UI/ListItem/ListItem';
import EditIcon from '@material-ui/icons/DragIndicator';
import { PackageResAdmin } from '../../ts/apiTs';

const DragHandle = SortableHandle(() => <EditIcon />);

const SortableItem = SortableElement(
  ({ id, galleryId, translations }: PackageResAdmin) => (
    <ListItem
      id={id}
      children={<DragHandle />}
      galleryId={galleryId}
      translations={translations}
    />
  )
);
const SortableContainerWrapper = SortableContainer(
  ({ children }: { children: {}[] }) => {
    return <List>{children}</List>;
  }
);

class DndComponent extends Component {
  state = { packageData };

  private onSortEnd = ({
    oldIndex,
    newIndex
  }: {
    oldIndex: number;
    newIndex: number;
  }) => {
    this.setState({
      packageData: arrayMove(this.state.packageData, oldIndex, newIndex)
    });
  };

  render() {
    console.log(this.state);
    return (
      <SortableContainerWrapper onSortEnd={this.onSortEnd} useDragHandle>
        {this.state.packageData.map((res, index) => (
          <SortableItem
            key={`item-${index}`}
            index={index}
            id={res.id}
            galleryId={res.galleryId}
            translations={res.translations}
          />
        ))}
      </SortableContainerWrapper>
    );
  }
}

export default DndComponent;


export const packageData: PackageResAdmin[] = [


{
    galleryId: 1,
    id: 1,
    translations: {
      [Language.CS]: {
        additionalInfo: 'additionalInfo',
        content: 'content',
        language: Language.CS,
        parentId: 1,
        title: 'eden'
      },
      [Language.EN]: {
        additionalInfo: 'additionalInfo',
        content: 'content',
        language: Language.EN,
        parentId: 1,
        title: 'one'
      }
    }
  },
  {
    galleryId: 1,
    id: 2,
    translations: {
      [Language.CS]: {
        additionalInfo: 'additionalInfo',
        content: 'content',
        language: Language.CS,
        parentId: 1,
        title: 'dva'
      },
      [Language.EN]: {
        additionalInfo: 'additionalInfo',
        content: 'content',
        language: Language.EN,
        parentId: 1,
        title: 'two'
      }
    }
  }
];