gpt4 book ai didi

reactjs - 为什么 react-sortable-hoc 基本示例无法使用 typescript 进行编译?

转载 作者:行者123 更新时间:2023-12-03 22:55:28 36 4
gpt4 key购买 nike

这是来自 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 导入语法,下面的屏幕截图显示了我不确定如何修复的错误:

enter image description here

下面是上面截图对应的代码:
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'));

关于reactjs - 为什么 react-sortable-hoc 基本示例无法使用 typescript 进行编译?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51585585/

36 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com