如何以编程方式创建 List(material-ui)？

Question

我尝试使用 Material-UI 中的列表组件创建联系人视图。 代码是用打字稿写的。 我真的不知道如何正确设置 react 和 material-ui。希望有人能指出。

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 语法的组件。您可以通过 React.createElement(Component, { props }, children) 做出反应。