Question

我有一些故事书文件都位于同一文件夹下，当我给两个不同的文件提供动态标题时，其动态标题会被最后一个加载的文件覆盖。看起来它的设置文字名称是一个全局名称，但我不明白为什么故事书会这样做，还是我错过了一些东西。

下面是两个组件的简单示例。当我在我的组件文件夹中从一个单击到另一个时，两个组件的标题都得到相同的文本。

Story1.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, select, text } from '@storybook/addon-knobs/react';
import Component1 from '.';
import { withNotes } from '@storybook/addon-notes';


const story = storiesOf('components/', module)
  .addDecorator(withKnobs)

story.add(
  'Component1',
  withInfo(info)(() => {

    const title = text('Title', 'A Title');

    const props = {
      title: {
        text: `<h3>${title}</h3>`,
      },
    };

    return (
      <Component1 { ...props }/>
    );
  },
  ),
);

Story2.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, select, text } from '@storybook/addon-knobs/react';
import Component2 from '.';
import { withNotes } from '@storybook/addon-notes';


const story = storiesOf('components/', module)
  .addDecorator(withKnobs)

story.add(
  'Component2',
  withInfo(info)(() => {

    const title = text('Title', 'Another Title');

    const props = {
      title: {
        text: `<h3>${title}</h3>`,
      },
    };

    return (
      <Component2 { ...props }/>
    );
  },
  ),
);

注意：

如果我将component2的文本名称更改为'header'之类的名称，而不是Title，则它可以正常工作，并且旋钮标题不会被覆盖。

const title = text('header', 'Another Title');

const props = {
  title: {
    text: `<h3>${header}</h3>`,
  },
};

有人可以解释为什么会这样。我有很多故事，而且大多数都有标题旋钮。我真的不希望继续为它们命名title1 title2等等。...

故事书旋钮，允许使用相同的名称文字

0 个答案: