JSX

JSX = Javascript + XML。React发明了JSX,利用HTML语法来创键虚拟DOM(减少对实际DOM的操作从而提升性能)。当遇到 < ,JSX就当HTML解析,遇到 { 就当JavaScript解析。

  • 数组递归
 public render () {
  var options = this.policies.map((policy) => {
    return (
      
         {policy.name}
      
    );
  })
  return (
     
  )
}

  • 绑定事件
    驼峰写法 && iview组件事件写法


  • 样式 & 类
click
var myStyle = {fontSize: 100}
click
import style from '../index.less'
【bem规范】

jsx


render渲染函数

createElement({String|Object|Function},{object},{string|Array})

第一个参数: 一个HTML标签、组件选项对象、或者resolve了上述任何一种的一个async函数。必填
第二个参数:属性对应的数据对象。可选

{
  'class': { // 字符串|对象|字符串和对象组成的数组
    foo: true
   },
  style: { // 字符串|对象|字符串和对象组成的数组
    fontSize: '20px'
  },
  props: { // 组件prop
    myProp: 'bar'
  },
  attrs: { // 普通的HTML特性
    id: 'foo'
  },
  domProps: {
    innerHTML: 'baz'
  },
  on: { // 事件监听器在'on'属性内,不支持’v-on:keyup.enter‘这样的修饰器,需要的话在处理函数里手动检查keyCode
    click: this.clickHandler
  },
  nativeOn: { //仅用于组件,用于监听原生事件,而不是组件内部使用 和’vm.$emit触发的事件‘
    click: this.nativeClickHandler
   },
  directives: [ // 自定义指令
    
  ],
  scopedSlots: { // 作用域插槽{ name: props => VNode | Array }
    default: props => createElement('div', props.value)
  },
  slot: '', // 如果组件是其他组件的子组件,需为插槽指定名称
  ref: ''
}

第三个参数:子节点。可选

你可能感兴趣的:(JSX)