时间:2017-06-21 03:36:54

标签: javascript reactjs react-toolbox storybook

我正在为React Table写一个故事,我得到了以下错误:

The error

React-toolbox文档未更新。我认为。因为我在the source code

中找不到modelsource属性

有我的组件来源

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

任何人都可以帮助我吗?我真的很感激。

1 个答案:

答案 0 :(得分:0)

我更新了Component的代码:

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

然后它有效。