我使用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>
);
}
});
以上工作并呈现两列:
现在我正在尝试创建自己的帮助程序组件来简化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
没有出现在控制台上):
我将其记录为issue。