【React】Vue/React中的createElement

vue的渲染函数render一节提到createElement

vue中的render

vue中的createElement对应的三个参数与react中一致，区别是啥呢？

• ①vue中第一个参数：html原生节点或者是自定义组件（大写转小写，驼峰转 - ）都是对应的字符串。
• ② 而react中第一个参数，若是html原生节点这是字符串，若是自定义组件（必须大写，小写报错：默认为原生节点），则是变量（即组件名称）

以element-react中的form表单为例，重新二次封装成自己需要的组件

表单组件以Select为例，其他同理（类似）

import React from 'react'
import { Select } from 'element-react'
export default class RatSelect extends React.Component {
    render() {
        const { modelForm, attr } = this.props
        const options = attr.options.map((option,index) =>
            <Select.Option key={index} {...option}></Select.Option>
        ); 
        return (
            <Select value={ modelForm[attr.prop]} {...attr} >
                { options }
            </Select>
        )
    }
}

react中的createElement

表单form如何引入上述的动态组件呢？

form的二次封装

具体案例：

import React from 'react'
import RatForm from '@/components/form'
export default class DemoForm extends React.Component {
    constructor(props) {
        super(props);
      
        this.state = {
            formAttr: { labelWidth: "80"}, 
            attrs:[
              { label:"活动名称", prop:"name" },
              { label:"活动区域", prop:"region", xtype:'Select',
                placeholder:"请选择活动区域", 
                options:[{label:"区域一", value:"shanghai"},
                    {label:"区域二", value:"beijing"}]  
              },
              { label:"活动日期", prop:"date1", xtype:'DatePicker',
                  placeholder:"选择日期"},
              { label:"活动时间", prop:"date2", placeholder:"选择时间", 
                selectableRange:"18:30:00 - 20:30:00", xtype:'TimePicker'},
              { label:"即时配送", prop:"delivery",
                 onText:"",  offText:"", xtype:'Switch'},
              { label:"活动性质", prop:"type",  xtype:'Checkbox',
                options:[
                  {label:"美食/餐厅线上活动", name:"type"}, 
                  {label:"地推活动", name:"type"}, 
                  {label:"线下主题活动", name:"type"}, 
                  {label:"纯品牌曝光", name:"type"}, 
                ]
              },
              { label:"特殊资源", prop:"resource", xtype:'Radio',
                options:[{value:"线上品牌商赞助"},{value:"线下场地免费"}] },
              { label:"活动形式", prop:"desc", type:"textarea"},
            ],
            form: {
                name: '', region: '', date1: null, date2: null, 
                delivery: false, type: [], resource: '', desc: ''
            }
        };
        this.onChange = this.onChange.bind(this);
    }
      
    onSubmit(e) {
        e.preventDefault();
    }
      
    onChange(k, v) {
        /** this.setState({
          最好用setState哦，这里为了省事
        })*/
        this.state.form[k] = v
        this.forceUpdate();
    }
      
    render() {
        const { form, attrs, formAttr } = this.state
        return (
          <RatForm modelForm={form} attrs={attrs} 
            onChange={this.onChange} 
            {...formAttr}></RatForm>
        )
    }
      
}