2017.12.07 React组件嵌套以及for循环渲染子组件

1.嵌套组件之父组件的定义：

export default class Examines extends Component{

    componentWillMount()  {
        console.log("aaaaaaaa");

        var data2={

            action:"queryTaskOfManager"
        };
        Common.getData(JSON.stringify(data2),function (ret) {
            alert(ret);
            var data3={
                name:ret.msg.name,

            };
            alert(data3);
        });

    }

    render(){
        var items = [];
        for (var i = 0; i < 10; i++) {
            items.push();            //这里父组件Examines，嵌套了子组件
        }
        return(

            
'#ECECEC', padding: '30px' }} onLoad={this.componentWillMount}>
            16}>

                {items}
            
            


        );

    }

}

 

2.嵌套组件之子组件的定义：

class OneTask extends React.Component{
    constructor(props) {

        super(props);
        this.state = {
            date: '',
            person:'',
            work:'',
            applyclass:'',
            otherinfo:'',
            applytime1:'',
            applytime2:'',
            timecount:''
        }
    }
    render(){
        return (
            8}>
                "请假申请单" bordered={false}>
                    
申请人：{this.state.person}
                    
申请时间：{this.state.date}
                    
岗位：{this.state.work}
                    
请假类型：{this.state.applyclass}
                    
请假备注：{this.state.otherinfo}
                    
请假时间：{this.state.applytime1}到,{this.state.applytime2}
                    
共请假：{this.state.timecount}天
                    16}>
                        12}>
                            "primary"  id="apply">批准

                        
                        12}>
                            "danger" style={{marginLeft:30}} id="cancel">不批
                        
                    
                
            

        )}
}

 

3.for循环渲染子组件：

render(){
        var items = [];
        for (var i = 0; i < 10; i++) {
            items.push();
        }
        return(

            
'#ECECEC', padding: '30px' }} onLoad={this.componentWillMount}>
            16}>

                {items}
            
            


        );

    }

 

转载于:https://www.cnblogs.com/hqutcy/p/7998601.html