1.最简单的渲染
render(){
let _this = this;
let list = this.state.themedata.map((item,i) => (
<li key={i}>
<div className={style.img}><img src={require("./images/"+item.src+".jpg")} /></div>
<List>
<Item extra={ <Button className={style.used} type={item.isUsing?"primary":"ghost"} size="small" inline onClick={ _this.clickButton.bind(this, i, item.isUsing) }>{item.isUsing ? "使用中" : "使用"}</Button> }>{item.name}</Item>
</List>
</li>
));
return (
<ul className={style.themewrapper}>
{list}
</ul>
);
}

2.渲染按钮,每个按钮功能不同

let list    = this.state.actions.map(action => this.initAction(action, oid));

initAction = function (action, oid) {
console.info('actionOid:' + oid)
//不同的组件
let object = require("../../actions/" + action.key).default;
const element = React.createElement(object,{"oid": oid} ,null);
return element;
}

例如：
import React, {Component} from 'react';
import {Icon, Tooltip, message} from 'antd';
import {global} from "../../constants/global";
const {IME_EDITOR_URL} = global;

class EditorAction extends Component {
constructor(props) {
super(props);
}

getButton() {
    return (
        <Tooltip title="编辑">
            <Icon type="edit" style={{color: "green"}} tooltip='edit' onClick={this.handleClick}/>
        </Tooltip>
    )
}

handleClick = () => {
    const self = this;
    window.location.href = IME_EDITOR_URL + this.props.oid;
}

render() {
    return (
        <div>{this.getButton()}</div>
    )
}

}
export default EditorAction;