почему компонент sortablejs не отображается правильно - PullRequest
Новая
       37

почему компонент sortablejs не отображается правильно

0 голосов
/ 20 сентября 2019

Я пытаюсь следовать руководству по использованию плагина SortableJs в реакции, и компонент отображается без ошибок, но не отображается правильно, он только отображает обычный неупорядоченный список без каких-либо стилей или функций.

Я попытался удалить пакеты и установить их снова, но это также не сработало.

вот как это отображается: снимок экрана отображаемого компонента

вот мой код: 

import Sortable from "react-sortablejs";

class BannersForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ["Apple", "Banana", "Cherry", "Guava", "Peach", "Strawberry"]
    };
  }

  render() {
    const items = this.state.items.map(val => <li data-id={val}>{val}</li>);

    return (
      <div>
        <Sortable
          tag="ul" // Defaults to "div"
        >
          {items}
        </Sortable>
      </div>
    );
  }
}

export default BannersForm;

и вот мой пакет. Json 

{
  "name": "website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "font-awesome": "^4.7.0",
    "history": "^4.9.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "react-sortablejs": "^1.5.1",
    "sortablejs": "^1.6.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Предполагается, что вы можете создать список, который можно перетащить для упорядочивания.

...