作者:手机用户2502853267 | 来源:互联网 | 2022-12-09 11:56
这是react-sortable-hoc网页中的基本示例。
import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';
const SortableItem = SortableElement(({value}) =>
{value}
);
const SortableList = SortableContainer(({items}) => {
return (
{items.map((value, index) => (
))}
);
});
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
;
}
}
render(
, document.getElementById('root'));
我不得不稍微修改上面的代码以适合打字稿导入语法,并且下面的屏幕截图显示了我不确定如何解决的错误:
这是与上述屏幕截图对应的代码:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';
const SortableItem = SortableElement(({value}) =>
{value}
);
const SortableList = SortableContainer(({items}) => {
return (
{items.map((value, index) => (
))}
);
});
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
;
}
}
ReactDOM.render(
, document.getElementById('root'));
我不知道如何解析这些错误的错误文本。由于该项目在GitHub上有5k颗星,我假设我遇到某种配置问题,但是我似乎无法弄清楚它是什么。
这是剩下的两个错误:
1。
[ts]类型'IntrinsicAttributes和IntrinsicClassAttributes不存在属性'items'
2。
[ts]类型'IntrinsicAttributes和IntrinsicClassAttributes不存在属性'value'
错误文本向我显示,好像没有正确选择组件包装语法,但是我自己不熟悉该语法,因此不确定是否已正确诊断问题或如何解决问题。
谢谢您的帮助。
1> Brian Adams..:
文档中基本示例中的代码是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}) =>
{value}
);
const SortableList = SortableContainer(({items}: {items: string[]}) => {
return (
{items.map((value, index) => (
))}
);
});
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
;
}
private OnSortEnd= ({oldIndex, newIndex}: {oldIndex: number, newIndex: number}) => {
this.setState({
items: arrayMove(this.state.items, oldIndex, newIndex),
});
};
}
ReactDOM.render(
, document.getElementById('root'));