Question

这是react-sortable-hoc webpage中的基本示例。

case (...)

为了适应打字稿导入语法，我不得不对上面的代码进行了非常小的改动，下面的屏幕快照显示了我不确定如何解决的错误：

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

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

我不知道如何解析这些错误的错误文本。由于该项目在GitHub上的得分超过5k，所以我认为我遇到了某种配置问题，但似乎无法弄清楚它是什么。

这是剩下的两个错误：

1。

[ts]属性'items'在类型'IntrinsicAttributes和 IntrinsicClassAttributes

2。

[ts]属性'value'在类型'IntrinsicAttributes和 IntrinsicClassAttributes

错误文本向我显示，好像没有正确选择组件包装语法，但是我自己不熟悉此语法，因此不确定是否已正确诊断问题或如何解决问题。 / p>

感谢您的帮助。

Answer 1

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

这是转换为TypeScript的基本示例：

Dim fso As New Scripting.FileSystemObject
Dim filepath As Variant
For Each filepath In filesToProcess
    ' Check the date last modified
    fileDate = fso.GetFile(item).DateLastModified ' modify as needed
    If firstDate < fileDate And secondDate > fileDate Then

        Dim connectionString As String
        connectionString = _
            "Provider=Microsoft.ACE.OLEDB.12.0;" & _
            "Data Source=""" & filepath & """;" & _
            "Extended Properties=""Excel 12.0;HDR=No"""

        Dim worksheetName As String
        worksheetName = "Sheet1"
        ' There can be multiple worksheets per workbook.
        ' If you are only interested in one worksheet per workbook, then fill in worksheetName somehow
        ' Otherwise, you will probably need an inner loop to iterate over all the worksheets

        Dim sql As String
        sql = _
            "SELECT * " & _
            "FROM [" & worksheetName & "$]"

        Dim rs As New ADODB.Recordset
        rs.Open sql, connectionString

        destinationWorksheet.Range("A1").CopyFromRecordset rs

        rs.Close
        Set rs = Nothing
    End If
Next

Answer 2

如果有人需要用于可选拖动句柄的代码，我正在使用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基本示例无法使用Typescript编译？

2 个答案: