如何将组件导出到故事书

Question

我正在练习故事书，这是我的代码 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.

Answer 1

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

你能试试这样的吗

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

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

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