项目中react ant遇到的一些坑

最新推荐文章于 2024-08-22 14:43:00 发布

转载最新推荐文章于 2024-08-22 14:43:00 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/haloooooo/blog/1647034

文章标签：

#javascript #python #ViewUI

本文探讨了两种实现动态表单的方法：一种是预先注册所有表单项并可能导致缓存问题；另一种则根据条件动态注册表单项，避免不必要的组件注册。通过对比分析，展示了如何优化动态表单的渲染流程。

2019独角兽企业重金招聘Python工程师标准>>>

ant form 动态变更表单项

form 表单不能提前注册比如

render(){
    const { visible,onCreate,onCancel, form, title } = this.props;
    let property = null;

    if(!isEmptyObject(this.props.propertys)){
        property = this.props.propertys.propertys.filter((property)=>property.visiable)
            .sort((propertya,propertyb)=> propertya.index-propertyb.index )
            .map((property)=>addFormFactory(property,this.props.form));
    }
    let show = (this.state.tasktype == "测试任务")
        ? <CaseTask {...this.props} testtaskpropertys = {this.props.testtaskpropertys} />
        : property
    const {getFieldDecorator} = form;
    // console.log(this.props);
    return (
        <Modal
            visible={visible}
            title={title}
            okText="提交"
            cancelText="取消"
            onCancel={onCancel}
            onOk={onCreate}
            >
            <Form layout="vertical" >
                {(isEmptyObject(this.props.propertys))?null:(this.props.propertys.projectItem === "task")
                    ? <FormItem label={"任务类型"}>
                        {getFieldDecorator("任务类型", {
                            rules: [{ required:false, message: `Please select your !` }],
                        })(
                            <RadioGroup onChange={this.handleClick.bind(this)}>
                                <RadioButton value="普通任务">{"普通任务"}</RadioButton>
                                <RadioButton value="测试任务">{"测试任务"}</RadioButton>
                            </RadioGroup>
                        )}
                    </FormItem>
                    : null
                }
                {/*{property}*/}
                {/*<CaseTask {...this.props} />*/}
                {show}
            </Form>
        </Modal>
    );
}

但是改造成这样

render(){
    const { visible,onCreate,onCancel, form, title } = this.props;
    let property = null;

    const {getFieldDecorator,getFieldValue} = form;
    let typeButton = taskType.map((task)=><RadioButton value={task.taskId}>{task.taskName}</RadioButton>)
    return (
        <Modal
            visible={visible}
            title={title}
            okText="提交"
            cancelText="取消"
            onCancel={onCancel}
            onOk={onCreate}
        >
            <Form layout="vertical" >
                {(isEmptyObject(this.props.propertys))?null:(this.props.propertys.projectItem === "task")
                    ? <FormItem label={"任务类型"}>
                        {getFieldDecorator("taskType", {
                            rules: [{ required:true, message: `请选择任务类型` }],
                        })(
                            <RadioGroup onChange={this.handleClick.bind(this)}>
                                {typeButton}
                            </RadioGroup>
                        )}
                    </FormItem>
                    : null
                }
                {(getFieldValue("taskType")===2)? <CaseTask form={form} testtaskpropertys = {this.props.testtaskpropertys}/>:
                    (!isEmptyObject(this.props.propertys))?this.props.propertys.propertys.filter((property)=>property.visiable)
                    .sort((propertya,propertyb)=> propertya.index-propertyb.index )
                    .map((property)=>addFormFactory(property,this.props.form)):""}
            </Form>
        </Modal>
    );
}

区别就是第一个会注册完全部的表单项组件，会产生cache，所有的组件都会注册到form上，不能通过更新组件来重新渲染form，第二个将组件渲染留到最后。并且根据动态判断会不断重新注册表单项

转载于:https://my.oschina.net/haloooooo/blog/1647034