React-Toolbox为表格编写故事

Question

我正在为React Table写一篇文章，我得到了下面的错误：

​

​

React-toolbox文档未更新。我认为。因为我在the source code中找不到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

对于Storybook：

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}/>)

然后它就起作用了。