陣營工具箱寫故事表

Question

我正在寫一個故事陣營表，我得到了以下錯誤：

陣營工具箱文件沒有更新。我認爲。因爲我不能在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 

對於童話故事：

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

然後它的作品。