Keine Benutzeroberfläche von Onsen UI?

Question

Ich habe diese einfache React JS + Redux App. Entschieden, um eine Version davon mit Onsen UI zu erstellen, erhalte ich keine Fehler und es gibt Ausgabe, aber die Onsen UI wird überhaupt nicht gerendert. Hier

ist das Bild:

Hier ist meine Render-Funktion:

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> 
     ); 
    } 

Hier ist meine renderToolbar Funktion:

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> 
     ); 
    } 

ich die Module überprüft haben sind alle importiert, ich auch bind die Funktionen in meinem c so sollte es funktionieren, aber warum habe ich keine UI?

PS: Ich bin Onsen v2.0 mit & React-Onsenui 0.6.2

Alles, was ich verpasst? Oder stimmt etwas in meinem Code nicht?

Answer 1

Im Gegensatz React native-Stil der Gestaltung seiner Komponenten Onsen UI hat normale CSS-Dateien, die enthalten sein müssen, damit es richtig funktioniert.

Sie können sie über Link-Tags zum Dom hinzufügen oder wenn Sie Webpack verwenden, können Sie sie nur benötigen.

Die Dateien sollten so etwas wie

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

Sie sein, sagen Sie keine Fehler in der Konsole bekommen, so dass ein Mangel an Stilen scheint, wie die wahrscheinlichste Ursache.

Auch wenn Sie interessiert sind, können Sie die Repo einer Demo KitchenSink App here Kasse.

Und schließlich kann dies ein wenig off-topic sein, aber Sie könnten monaca cli versuchen, da Sie damit leicht von einem Arbeitsvorrat starten können.