При использовании React CommandBar в проекте SPFx, как можно построить массив items [] в отдельном файле, включая настройку состояния родительского компонента?

Я новичок в React / Typescript / SPFx, и я использую компонент React CommandBar в своей веб-части SPFx. CommandBar нужны команды, определенные в массиве farItems []. Массив элементов содержит свойства каждой команды, включая метод onClick. В моем случае метод onClick передается в мой файл CommandBar.tsx через его реквизиты.

Я могу создать массив farItems в том же файле tsx, что и компонент CommandBar, включая метод onClick из родительского класса. Но я хочу переместить процесс «создание массива farItems» в отдельный файл, чтобы сделать его более пригодным для повторного использования.

Я кратко изложил текущее состояние кода в этой сути

toggleTips - это функция, которую я использую в основном компоненте реакции (PivotTiles.tsx) для изменения состояния. Я передаю функцию CommandBar.tsx через его свойства, поэтому, если я создам массив элементов в этом файле, все будет хорошо. Но я хочу иметь возможность импортировать farItems [] из другого файла.

Я надеюсь, что смогу создать массив farItems [] в другом файле, чтобы его можно было использовать повторно.

С моим текущим состоянием кода у меня все работает в отдельном файле, если я только пытаюсь добавить что-то вроде console.log () в onClick. Мое препятствие заключается в передаче функции от родителя для изменения состояния и правильного синтаксиса / логики.

Спасибо


person MikeZ    schedule 14.10.2019    source источник


Ответы (1)


Благодаря некоторой помощи @AndrewConnell мне удалось передать функцию обратного вызова. См. Суть его предложения и пару мелочей, которые мне пришлось настроить, чтобы заставить его работать:

Forked Gist от Эндрю с моими комментариями, прикрепленными в конце

person Mike    schedule 15.10.2019