Блог

Главная - Вопросы по программированию - Использование аргумента сборника рассказов для установки вложенного аргумента

Использование аргумента сборника рассказов для установки вложенного аргумента

#javascript #reactjs #storybook

#javascript #reactjs #сборник рассказов

Вопрос:

Итак, у меня есть история в сборнике рассказов, вот так:

 export const One = Template.bind();
One.args = {
  children: [
    <MyComponent {...Icon.args} headerText={"Header"} />,
    <MyComponent {...Standard.args}  />
  ]
};

Скажем Standard.args , у меня получается выглядеть так:

 Standard.args = {
  headerText: "Default Header",
  detailText: "Default details"
};

Я хотел бы иметь возможность устанавливать detailText значение, используя отдельный аргумент, но не знаю, как это сделать. Что-то вроде приведенного ниже, но, очевидно, с рабочим синтаксисом:

 export const One = Template.bind();
One.args = {
  detailText: "new detail text",
  children: [
    <MyComponent {...Icon.args} headerText={"Header"} />,
    <MyComponent {...Standard.args} detailText={detailText} />
  ]
};

Возможно ли это?

Комментарии:

1. вы решили эту проблему?

2. Нет, я думаю, что в итоге мне пришлось сделать больше сочиненной истории со всеми реквизитами на одном уровне

Ответ №1:

Я использую этот обходной путь, который работает для меня. Сначала я определяю вложенное содержимое:

 const ContentOne = () => (<div>This is content one.</div>);

const ContentTwo = () => (<div>This is content two.</div>);

Затем я создаю шаблоны для каждого содержимого:

 const TemplateOne = (args) => (
  <YourComponent {...args}>
    <ContentOne />    
  </YourComponent>
)

const TemplateTwo = (args) => (
  <YourComponent {...args}>
    <ContentTwo />    
  </YourComponent>
)

И, наконец, я экспортирую компоненты:

 export const ComponentOne = TemplateOne.bind({});
ComponentOne.args = {
  detailText: "One detail text",
};

export const ComponentTwo = TemplateTwo.bind({});
ComponentTwo.args = {
  detailText: "Two detail text",
};
Метки: