为什么 react-sortable-hoc 基本示例无法使用 typescript 编译?
Why does the react-sortable-hoc basic example fail to compile with typescript?
这是来自 react-sortable-hoc webpage 的基本示例。
import React, {Component} from 'react';
import {render} 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 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} />;
}
}
render(<SortableComponent/>, 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'));
我不知道如何解析这些错误的错误文本。由于该项目在 GitHub 上有 5k+ 星,我假设我有某种配置问题,但我似乎无法弄清楚它是什么。
这是剩下的两个错误:
1.
[ts] Property 'items' does not exist on type 'IntrinsicAttributes &
IntrinsicClassAttributes
2.
[ts] Property 'value' does not exist on type 'IntrinsicAttributes &
IntrinsicClassAttributes
错误文本读起来好像没有正确提取组件包装语法,但我自己不熟悉这种语法,所以我不确定我是否正确诊断了问题或如何修复它.
感谢您的帮助。
文档中基本示例中的代码是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'));
如果有人需要我正在使用带有 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'
}
}
}
];
这是来自 react-sortable-hoc webpage 的基本示例。
import React, {Component} from 'react';
import {render} 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 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} />;
}
}
render(<SortableComponent/>, 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'));
我不知道如何解析这些错误的错误文本。由于该项目在 GitHub 上有 5k+ 星,我假设我有某种配置问题,但我似乎无法弄清楚它是什么。
这是剩下的两个错误:
1.
[ts] Property 'items' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes
2.
[ts] Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes
错误文本读起来好像没有正确提取组件包装语法,但我自己不熟悉这种语法,所以我不确定我是否正确诊断了问题或如何修复它.
感谢您的帮助。
文档中基本示例中的代码是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'));
如果有人需要我正在使用带有 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'
}
}
}
];