为什么我不能在“辅助”组件中自己渲染Column?

时间:2016-06-14 14:04:48

标签: reactjs react-jsx jsx fixed-data-table

我使用fixed-data-table在反应中使用了以下SSCCE:

const rows = [{name: 'Apple', desc: 'a popular fruit'},
              {name: 'Cat',   desc: 'a domesticated feline'}];


const App = React.createClass({

    render: function() {
        return (
            <Table id='foo'
            height={200}
            width={400}
            rowsCount={rows.length}
            rowHeight={26}
            headerHeight={50}>
                <Column
                    width={0}
                    flexGrow={2}
                    cell={props=>(<Cell>{rows[props.rowIndex].name}</Cell>)}
                    header='Name'/>
                <Column
                    width={0}
                    flexGrow={2}
                    cell={props=>(<Cell>{rows[props.rowIndex].desc}</Cell>)}
                    header='Description'/>
            </Table>
        );
    }
});

以上工作并呈现两列:

enter image description here

现在我正在尝试创建自己的帮助程序组件来简化Column接口:

const EnhancedColumn = React.createClass({
    render: function() {
        console.log('render called');
        return (
                    <Column
                    width={0}
                    flexGrow={2}
                    cell={props=>(<Cell>{rows[props.rowIndex].name}</Cell>)}
                    header='Name'/>
        );
    }
});

const App2 = React.createClass({

    render: function() {
        return (
            <Table id='foo'
            height={200}
            width={400}
            rowsCount={rows.length}
            rowHeight={26}
            headerHeight={50}>
                <EnhancedColumn/>
                <Column
                    width={0}
                    flexGrow={2}
                    cell={props=>(<Cell>{rows[props.rowIndex].desc}</Cell>)}
                    header='Description'/>
            </Table>
        );
    }
});

突然,EnhancedColumn根本没有呈现(实际上甚至没有调用它的render方法,因为消息render is called没有出现在控制台上):

enter image description here

我将其记录为issue

0 个答案:

没有答案