Leaf

Vue jsx 和 React jsx 的一些不同点

2022-4-25 前端

# 事件绑定

vue 用的是横线, react 用的是驼峰 (注: vue2.1 版本已经支持用驼峰)

// vue 2.1-
<a on-click={this.loadMore} href="javascript:;">加载更多</a>
// vue 2.1
<a onClick={this.loadMore} href="javascript:;">加载更多</a>
// react
<a onClick={this.loadMore} href="javascript:;">加载更多</a>
1
2
3
4
5
6

# 插入 html 代码

// vue
<div domProps-innerHTML={html} />
// react
<div dangerouslySetInnerHTML={{__html: html}} />
1
2
3
4

# 解构传 props

这个 react 相对简单, 只要是对象里都可以一股脑传过去, vue 却麻烦很多, 每种类型都需要放在对应的特殊顶级属性

// vue
const data = {
  // props
  props: {
    value: "1",
  },
  // 属性
  attrs: {
    id: "id",
  },
  // Dom props
  domProps: {
    innerHTML: "bar",
  },
  // 事件 (不支持修饰符)
  on: {
    click: this.clickHandler,
  },
  // 原生事件
  nativeOn: {
    click: this.nativeClickHandler,
  },
  // class 样式, 类似 `:class`
  class: {
    foo: true,
    bar: false,
  },
  // style 样式, 类似 `:style`
  style: {
    color: "red",
    fontSize: "14px",
  },
  // 其他
  key: "key",
  ref: "ref",
  slot: "slot",
};
return <index-post {...data} />;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# slot 和 children

vue 中 slot 的用法

{
    render (h) {
        return <div>{this.$slots.default}</div>
    }
}
1
2
3
4
5

react 中 children 的用法

{
  return <div>{props.children}</div>;
}
1
2
3

Tip: 此内容转自此处 (opens new window)