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

Posted 小春熙子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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(<OneTask/>);            //这里父组件Examines,嵌套了子组件<OnTask/>
        }
        return(

            <div style={{ background: \'#ECECEC\', padding: \'30px\' }} onLoad={this.componentWillMount}>
            <Row gutter={16}>

                {items}
            </Row>
            </div>

        );

    }

}

 

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

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

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

                        </Col>
                        <Col span={12}>
                            <Button type="danger" style={{marginLeft:30}} id="cancel">不批</Button>
                        </Col>
                    </Row>
                </Card>
            </Col>

        )}
}

 

3.for循环渲染子组件:

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

            <div style={{ background: \'#ECECEC\', padding: \'30px\' }} onLoad={this.componentWillMount}>
            <Row gutter={16}>

                {items}
            </Row>
            </div>

        );

    }

 

以上是关于2017.12.07 React组件嵌套以及for循环渲染子组件的主要内容,如果未能解决你的问题,请参考以下文章

react 实现组件嵌套以及子组件与父组件之间的通信

React - 使用循环创建嵌套组件

十八React react-router4.x中:实现路由模块化以及嵌套路由父子组件传值

react native 怎么嵌套循环生成组件

React Hook Form:提交带有嵌套组件的表单或提取嵌套组件的字段提交

react 没有嵌套关系的组件通讯