React-Toolbox為表編寫故事

Question

我正在為React Table編寫故事，但出現以下錯誤：

React-toolbox文檔未更新。 我認為。 因為我無法在源代碼中找到model和source屬性

有我的組件來源

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import {Table as RTTable} from 'react-toolbox/lib/table'

const Table = ({
  ...props
})=>
  <RTTable {...props}></RTTable>

Table.propTypes = {
    source: PropTypes.array,
    model: PropTypes.object,
}

export default styled(Table)`
  border: 1px solid;
`

我故事的來源：

import React from 'react'
import {storiesOf} from '@storybook/react'
import Table from 'Table'

const UserModel = {
      name: {
        type: String,
    },
    twitter: {
        type: String,
    },
    birthdate: {
        type: Date,
        title: 'Date of Birth',
    },
    cats: {
        type: Number,
    },
    dogs: {
        type: Number,
    },
    active: {
        type: Boolean,
    },
}

const users = [
    {
        name: 'Javi Jimenez',
        twitter: '@soyjavi',
        birthdate: new Date(1980, 3, 11),
        cats: 1,
    }, {
        name: 'Javi Velasco',
        twitter: '@javivelasco',
        birthdate: new Date(1987, 1, 1),
        dogs: 1,
        active: true,
    },
]

storiesOf('Table', module).add('with source', ()=> <Table model={UserModel} source={users} />)

誰能幫我？ 我真的很感激。

Answer 1

我已經更新了組件代碼：

import React from 'react'
import PropTypes from 'prop-types'
import {Table as RTTable, TableHead, TableCell} from 'react-toolbox/lib/table'

const Table = props=> {
const headerKeys = Object.keys(props.model)
return (
<RTTable>
  <TableHead>
    {
      headerKeys.map((headerKey, index)=> <TableCell key={index}>{headerKey}</TableCell>)
    }
  </TableHead>
</RTTable>
)
}
Table.propTypes = {
    model: PropTypes.object,
}

export default Table

對於故事書：

import React from 'react'
import {storiesOf} from '@storybook/react'
import Table from 'Table'
const UserModel = {
    name: {
        type: String,
    },
    age: {
        type: Number,
    },
}

storiesOf('Table', module).add('Init table', ()=> <Table model={UserModel}/>)

然后工作。