我在 React 中有以下 SSCCE 使用fixed-data-table:
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 is called
没有出现在控制台上):
我将此记录为问题。