没有来自温泉 UI 的 UI？

Question

我有这个简单的 React JS + Redux 应用程序。决定使用 Onsen UI 创建它的一个版本，我没有收到任何错误并且有输出但是 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：我正在使用 Onsen v2.0 和 React-Onsenui 0.6.2

我错过了什么吗？还是我的代码有问题？

Answer 1

与 React native 设置组件样式的方式不同，Onsen UI 具有正常的 CSS 文件，需要包含这些文件才能使其正常工作。

您可以通过 link 标签将它们添加到 dom 或者如果您使用的是 webpack，您可以只需要它们。

文件应该类似于

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

您说您在控制台中没有收到任何错误，因此缺少样式似乎是最可能的原因。

此外，如果您有兴趣，可以查看演示 kitchensink 应用程序的存储库 here。

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

没有来自温泉 UI 的 UI？

No UI from Onsen UI?

ecmascript-6

reactjs

onsen-ui