在Storybook中使用Vue和JSX

Question

我想对Storybook Vue中的故事使用JSX，但是我发现编译器不喜欢某些属性语法。这是引导程序模式的示例：

    .add('with scrollable content', () => ({
        components: { EDialog, EButton },
        render: h => // eslint-disable-line no-unused-vars
            <div>
                <b-button v-b-modal="dialog4">Open dialog</b-button>
                <b-modal id="dialog4" title="Dialog with Scrolling Content" scrollable>
                    <p class="my-4" v-for="i in 20" :key="i">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </p>
                </b-modal>
            </div>
    }));

如果我使用template属性，则此方法有效。但是，当使用JSX（如此处所示）时，会向:key抛出错误，并显示错误：Parsing error: Unexpected token。如果我将其更改为v-bind:key，则错误将更改为Identifier expected。在正确的位置查看后，我发现了一个更有用的错误：

Namespaced tags/attributes are not supported. JSX is not XML. For attributes like xlink:href, use xlinkHref instead

因此，我尝试将其更改为v-bindKey，这使错误消失了，但是我没有得到20个应有的p元素。