Передайте элемент JSX в параметры сборника рассказов в дополнительном модуле сборки - PullRequest
Новая
       6

Передайте элемент JSX в параметры сборника рассказов в дополнительном модуле сборки

0 голосов
/ 07 февраля 2020

Я создаю пользовательскую вкладку 

import React from 'react';
import { addons, types } from '@storybook/addons';
import { AddonPanel } from '@storybook/components';
import { useParameter } from '@storybook/api';

export const ADDON_ID = 'storybook/principles';
export const PANEL_ID = `${ADDON_ID}/panel`;
export const PARAM_KEY = 'principles'; // to communicate from stories

const PanelContent = () => {
  const { component: Component } = useParameter(PARAM_KEY, {});
  if (!Component) {
    return <p>Usage info is missing</p>;
  }
  return <Component />;
};

addons.register(ADDON_ID, api => {
  addons.add(PANEL_ID, {
    type: types.Panel,
    title: 'Usage',
    paramKey: PARAM_KEY,
    render: ({ active, key }) => {
      return (
        <AddonPanel active={active} key={key}>
          <PanelContent />
        </AddonPanel>
      );
    },
  });
});

, а затем использовать его в моих рассказах типа 

storiesOf('Superman', module)
  .addParameters({
    component: Superman,
    principles: {
      component: <Anatomy />
    },
  })
  .add('a story 1', () => <p>some data 1</p>)
  .add('a story 2', () => <p>some data 2</p>)

Часть, в которой я пытаюсь передать элемент JSX, например 

principles: { component: <Anatomy /> }, // this does not work

principles: { component: 'i can pass in a string' }, // this does work

Я получаю сообщение об ошибке, как показано ниже, когда я передаю элемент JSX как реквизит

enter image description here

Как передать элемент JSX в параметры сборника рассказов?

...