没有来自Onsen UI的UI？

Question

我有这个简单的反应JS + Redux应用程序。决定使用Onsen创建一个版本，我没有收到任何错误，并且有输出，但是Onsen UI根本没有呈现。

这是一张图片：

​

​

以下是我的渲染功能：

render() {
        return (
            <Ons.Page renderToolbar={this.renderToolbar}>

                                <Ons.List dataSource={this.props.listingData} renderRow={(listingData, index) => (                                      
                                    <Ons.ListItem tappable key={index} modifier='longdivider' >
                                        <div className={'list' + listingData.location_id}>{listingData.location_id}</div>
                                        <div>{listingData.location}</div>
                                        <div>{listingData.description}</div>
                                    </Ons.ListItem>)} />
                                    <div><div onClick={this.stateToEntry} className="addButton">Add</div><div onClick={this.stateToEdit} className="editButton">Edit</div><div onClick={this.stateToDelete} className="deleteButton">Delete</div></div>
            </Ons.Page>
        );
    }

下面是我的renderToolbar函数：

renderToolbar() {
        return (
            <Ons.Toolbar>
                <div className='center'>My app</div>
                <div className='right'>
                    <Ons.ToolbarButton /*onClick={}*/>
                    <Ons.Icon icon='md-more-vert' />
                    </Ons.ToolbarButton>
                </div>
            </Ons.Toolbar>
        );
    }

我已经检查了所有模块都是导入的，我也在构造函数中bind函数，所以它应该可以工作，但是为什么我没有UI呢？

PS:我正在使用Onsenv2.0&React Onsenui 0.6.2

我错过什么了吗？或者我的代码有什么问题吗？

Answer 1

与React本机的组件样式不同，Onsen UI有正常的CSS文件，需要包含这些文件才能正常工作。

您可以通过链接标记将它们添加到dom，或者如果您正在使用webpack，您可以只需要它们。

这些文件应该是

onsenui/dist/css/onsenui.css
onsenui/dist/css/onsen-css-components.css

您说过控制台中没有任何错误，所以缺少样式似乎是最可能的原因。

另外，如果你感兴趣，你可以查看一个演示厨房链接应用程序这里的回购。

最后，这可能有点离题，但您可以尝试monaca cli，就像它一样，您可以轻松地从一个工作样板开始。