我对此也感到困惑。

这是一个关于问题的最小复现：
https://github.com/srmagura/storybook-decorator-order-repro

export default {
  title: "App",
  decorators: [
    (Story) => (
      <div>
        <p>Decorator 1</p>
        <Story />
      </div>
    ),
    (Story) => (
      <div>
        <p>Decorator 2</p>
        <Story />
      </div>
    ),
  ],
} satisfies Meta;

export const Basic: StoryObj = {
  render: () => <p>My story</p>,
};

它渲染出：

顺便说一下，我认为文档中描述的行为是我所期望的，而实际行为是令人惊讶的。

你的复现结果与@IanVS 的原始评论相反。
如果你稍微改写一下：

const A =  (Story) => (
      <div>
        <p>Decorator 1</p>
        <Story />
      </div>
    );
const B = (Story) => (
      <div>
        <p>Decorator 2</p>
        <Story />
      </div>
    );

export default {
  decorators: [A, B],
};

你看到的结果是 B(A(story)) 。

感谢@shilman,你完全正确。我可能没有仔细阅读OP的评论。你觉得我应该为此创建一个新的GitHub问题吗？

我感到困惑的原因是，文档中说装饰器按照它们被定义的顺序运行。假设我们正在使用React,并且装饰器按照[A, B]的顺序定义，我期望的组件树是：

<A>
  <B>
    <Story />
  </B>
</A>

这是因为在React中，渲染从组件树的顶部开始，然后向下进行。我知道在其他框架中可能会有所不同。谢谢！

是的，这就是它们的呈现方式。我认为文档本可以更好地解释它，仅此而已。

如果你有兴趣帮助改进文档，我很乐意审阅你的贡献。请告诉我，我们会从那里开始。
期待收到你的回复。

嘿，@jonniebigodes,是的，这周末会提交一个PR。

太棒了，很高兴听到@srmagura的消息。期待看到它。