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;
