如何将组件导出到故事书

Posted 2023-02-19

【中文标题】如何将组件导出到故事书

【英文标题】：How can export components to storybook

【发布时间】：2020-10-29 19:01:46

【问题描述】：

我正在练习故事书，这是我的代码 src/component/Table.js

import React, Component from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Table from './components/Table'

class Table extends Component 
  render() 
    return (
      <table class="table table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>PRICE</th>
            <th>OPTION</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    );
  


export default Table;

这是我的故事书代码 src/stories/Button.story.js

import React from 'react';
import  action  from '@storybook/addon-actions';
import  Button  from '@storybook/react/demo';
import 'bootstrap/dist/css/bootstrap.css';
import Table from './components/Table';

export default 
  title: 'Button',
  component: Button,
;

export default Table;

我想通过storybook 从components 文件夹中导出Table，但我不知道如何导出它，有人可以帮我吗？拜托了，非常感谢

当我这样导出时，它会显示一个错误：Only one default export allowed per module.

【问题讨论】：

尝试从其中一项导出中删除“默认”

@Oyeme 还是错误

【参考方案1】：

我认为问题可能会出现，因为您的代码中有两个默认导出。

你能试试这样的吗

import React from 'react';
import Table from './components/Table';

export default 
  component: Table,
  title: 'Table',
;

export const sample = () => <Table />;

【讨论】：

您的 Table 组件的路径对吗？也许它像这样放在它附近import Table from './Table';？

它给我看是这样的：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

你能检查一下你的表格组件的导出如果它默认导出你需要像这样导入它import Table from './components/Table';