react-绝对网格，displayObject问题

Question

我正在尝试使用这个组件：https://github.com/jrowny/react-absolute-grid。

文档说我应该传递一个呈现项目的displayObject。

所以我创建了一个displayObject，就像文档中的那个，它有这样的呈现方法：

  render: function() {
    // Supposing your item shape is something like {name: 'foo'}
    const { item, index, itemsLength } = this.props;
    return <div>Item {index} of {itemsLength}: {item.name}</div>;
  }

我像这样把它传递给了组件：

<AbsoluteGrid
    items={SampleData.screens}
    displayObject={<DisplayObject/>}
    onMove={onMoveDebounced}
    dragEnabled={true}
    responsive={true}
    verticalMargin={42}
    itemWidth={250}
    itemHeight={250}
    filteredProp={'name'}
  />
Where SampleData.screens is:

module.exports = {
  screens: [
    {'url': 'http://invisionapp.com/subsystems/do_ui_kit/assets/img/screens/original-1x/screen-1-1-login.jpg', 'name': 'login', 'sort': 1, 'key': 1},
    {'url': 'http://invisionapp.com/subsystems/do_ui_kit/assets/img/screens/original-1x/screen-1-2-sign-up.jpg', 'name': 'signup', 'sort': 2, 'key': 2},
    {'url': 'http://invisionapp.com/subsystems/do_ui_kit/assets/img/screens/original-1x/screen-1-3-walkthrough.jpg', 'name': 'walkthrough', 'sort': 3, 'key': 3}
  ]
};

当我在浏览器中打开页面时，看不到来自displayObject的文本。

如何使用displayObject？

Answer 1

当是返回呈现html的函数时，DisplayObject工作得很好，我尝试为它创建一个不同的React.Component，但遇到了一些问题

const items = [
{ key: "0", sort: 0, name: 'Test 1', filtered: false },
{ key: "1", sort: 1 ,name: 'Test 2', filtered: false },
{ key: "2",sort: 2, name: 'Test 3', filtered: false},
{ key: "3", sort: 3,name: 'Test 4', filtered: false }
]


function GridItem(props) {
    const { item, index, itemsLength } = props;
    return  <div >
        <span>{item.name}</span>
    </div>;
}

const AbsoluteGrid =   createAbsoluteGrid(GridItem);