21年11月21日试图学点React

续上集

上次看到使用JSX。在JSX中，可以使用大括号传递变量：

使用大括号传递值

  const children = 'Hello World'
  const className = 'container'
  const props = {className, children}
  const element = <div className={props.className}>{props.children}</div>

等效代码

const element = <div className="container">Hello World</div>

当你想传递的props比较长的时候，把它们挨个写上可不是什么方便的做法。所以，你可以这样写：

const children = 'Hello World'
const className = 'container'
const props = {className, children}
const element = React.createElement('div',{props})

上述代码中的React.createElement也可以替换为JSX语法：

const children = 'Hello World'
const className = 'container'
const props = {className, children}
const element = <div {...props}/>

danger

上述代码
const element = <div {...props}/>

中的...不可以省略。

除此之外，你可以将props当作一个“扩充”：

使用JSX

```js
const children = 'Hello World'
const className = 'container'
const props = {className, children}
const element = <div {id:'my-id',...props} />
```

不使用JSX

```js
const children = 'Hello World'
const className = 'container'
const props = {className, children}
const element = React.createElement('div',{id:'my-id',...props})
```

注意，这里的先后顺序影响谁会生效。例如，下面的两种顺序会导致className不一样：

第一种顺序

  const children = 'Hello World'
  const className = 'container'
  const props = {className, children}
  const element = React.createElement('div',{id:'my-id',className:'whatever',...props})
  // 最终生效的 className 会是 container

第二种顺序

  const children = 'Hello World'
  const className = 'container'
  const props = {className, children}
  const element = React.createElement('div',{id:'my-id',...props, className:'whatever'})
  // 最终生效的 className 会是 whatever

可以看出，相同的属性，顺序在后面的会生效。