Как использовать response-sortable-hoc с WordPress Gutenberg - PullRequest
Новая
       11

Как использовать response-sortable-hoc с WordPress Gutenberg

0 голосов
/ 24 апреля 2019

Гутенберг все еще довольно нов, но я все еще надеюсь, что кто-то сталкивался с этой проблемой и нашел решение.

Я использовал create-guten-block для компоновки проекта и создал контент с вкладкамиблок.Я использую response-sortable-hoc с Гутенбергом, чтобы поменять предметы из списка предметов.Я пробовал несколько решений, но не получил ответа.Проблема, с которой я сталкиваюсь, заключается в том, что я получаю эту ошибку в консоли, что она не может прочитать карту Undefined.Я думаю, что undefined - это объект items.

1004

Пожалуйста, посмотрите следующий код, который я использую в WordPress Gutenberg.Я думаю, что мне не хватает чего-то, чего я не знаю.Любая помощь будет заметна. 

const { __ } = wp.i18n; // Import __() from wp.i18n
import {
    SortableContainer,
    SortableElement,
    SortableHandle,
    arrayMove
} from 'react-sortable-hoc';
const { registerBlockType } = wp.blocks;

registerBlockType( 'cgb/block-tabbed-content', {
    title: __( 'tabbed-content - CGB Block' ), // Block title.
    icon: 'shield',
    category: 'common',
    keywords: 'tabbed-content',

  attributes : {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  },

edit: function( props ) {

    const { attributes, setAttributes } = props;

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

    const onSortEnd = ({oldIndex, newIndex}) => {
      setAttributes(({items}) => ({
        items: arrayMove(items, oldIndex, newIndex),
      }));
    };

    return (
        <div className={ props.className }>
            <SortableList items={attributes.items} onSortEnd={onSortEnd} />
        </div>
        );
    },
...