用StoryBook官网的代码，但报错，Unexpected token’<’

在js文件中// Button.stories.js|jsx

import { Button } from ‘./Button’;

export default {
component: Button,
};

/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.

• See https://storybook.js.org/docs/react/api/csf
• to learn how to use render functions.
  */
  export const Primary = {
  render: () => ,
  };Unexpected token ‘<’
  SyntaxError: Unexpected token '<'请问要怎么修改

解决

这段代码似乎是使用 JSX 语法编写的，而不是普通的 JavaScript。JSX 是一种在 React 中常用的语法扩展，用于描述组件的结构和呈现方式。

然而，根据您提供的代码，似乎您正在使用普通的 JavaScript 环境，而不是 React 或其他支持 JSX 的框架。因此，在您的代码中，将 <Button primary label="Button" /> 改为普通的 JavaScript 对象字面量即可。

修改后的代码如下所示：

export const Primary = {
  render: () => ({
    template: '<button class="primary">Button</button>',
  }),
};

在这个例子中，我们不再使用 JSX 语法，而是使用字符串模板来定义按钮的结构和样式。请根据您实际的需求修改按钮的模板内容和样式类名。

希望这个修改能够解决您遇到的问题。如果您还有其他疑问，请随时提问。

内容渲染不出来

错误描述

预期效果:

错误 ： 按钮里面没有内容

错误代码

import Button from "./Button.vue";

export default {
  component: Button,
};


export const Primary = {
  render: () => ({
    template: '<Button primary label="Button" />',
  }),
  args: {
    label: "Primary",
  },
};

写了args中label，没道理不渲染啊？？？？

代码改正

render里面的属性不完整
记得箭头函数里也加上args参数

export const Primary = {
  render: (args) => ({
    components: {
      Button,
    },
    setup() {
      // Story args can be spread into the returned object
      return {
        ...args,
      };
    },
    template: '<Button primary label="Button" />',
  }),
  args: {
    label: "Primary",
  },
};