storyBook常见踩坑报错 和 解决

用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 objectreturn {...args,};},template: '<Button primary label="Button" />',}),args: {label: "Primary",},
};