Liste (materyal-ui) nasıl programlanır?

Question

Malzeme-UI'den liste bileşeniyle bir iletişim görünümü oluşturmaya çalışıyorum. Kod, yazı tipinde yazılmıştır. Kesinlikle tepki ve malzeme-ui ile doğru bir kurulum olduğunu bilmiyorum. Umarım birisi işaret edebilir.

export interface IContact { 
    contactName: wx.IObservableProperty<string>; 
} 

export abstract class Contact implements IContact { 
    contactName: wx.IObservableProperty<string>; 

    constructor() { 
     this.contactName = wx.property<string>(); 
    } 
} 

/// <reference path="icontact.ts" /> 

import {IContact, Contact} from '../models/icontact.ts' 

export interface IPersonContact extends IContact { 
} 

export class PersonContact extends Contact implements IPersonContact { 
    constructor() { 
     super(); 
    } 
} 

/// <reference path="../../../typings/tsd.d.ts" /> 
/// <reference path="../models/icontact.ts" /> 
/// <reference path="../models/personcontact.ts" /> 

'use strict'; 

import * as React from 'react'; 
import * as ReactDOM from 'react-dom'; 
import * as Mui from 'material-ui'; 
import {IContact} from '../models/icontact.ts' 
import * as MuiStyles from 'material-ui/lib/styles'; 
import {IPersonContact, PersonContact} from '../models/personcontact.ts' 

interface ContactViewPros { 
} 

interface ContactViewState { 
} 

class ContactView extends React.Component<ContactViewPros, any>{ 

    itemAddedSubscriber: Rx.IDisposable; 
    itemRemovedSubscriber: Rx.IDisposable; 

    dataSource: wx.IObservableList<IContact>; 
    items: Array<Mui.ListItem>; 

    constructor() {  
     super(); 
     this.state = { muiThem: MuiStyles.ThemeManager.getMuiTheme(MuiStyles.LightRawTheme) }; 

     this.dataSource = wx.list<IContact>(); 

     this.itemAddedSubscriber = this.dataSource.itemsAdded.subscribe(changedInfos => this.onContactsAdded(changedInfos)); 
     this.itemRemovedSubscriber = this.dataSource.itemsRemoved.subscribe(changedInfos => this.onContactRemoved(changedInfos)); 

     let contact = new PersonContact(); 
     contact.contactName('adam'); 
     this.dataSource.add(contact); 
    }  

    onContactsAdded(changedInfos: wx.IListChangeInfo<IContact>): void { 
     changedInfos.items.forEach(contact => { 
      console.log("Contact-list changed"); 
     }); 
    } 

    onContactRemoved(changedInfos: wx.IListChangeInfo<IContact>): void { 
    } 

    getInitialState() { 
     return this.state; 
    } 

    componentWillUnmount() { 
     this.itemAddedSubscriber.dispose(); 
     this.itemRemovedSubscriber.dispose(); 
    } 

    renderContactList() { 
     this.items = this.dataSource.map<Mui.ListItem>(contact=> { 
      var listItem = new Mui.ListItem(); 
      listItem.props = { 
       initiallyOpen: true 
      }; 
      return listItem; 
     }); 
    } 

    render() { 
     var items = this.renderContactList(); 
     return <Mui.List>{items}</Mui.List>; 
    } 
} 

export default ContactView; 

Answer 1

JSX sözdizimi olmadan bileşen oluşturmak isteyebilirsiniz. React.createElement (Bileşen, {props}, çocuklar) ile tepki olarak bunu yapabilirsiniz.