Re: 新手让网页 act 起来: Day03 - 再次了解React.createElement()

前言

在上一篇文章中我们简单的介绍到如何使用 React.createElement()，并搭配 ReactDOM.render()，让我们能够顺利的在画面上印出 Hello world。今天就让我们再多认是一点 React.createElement 这个 api 吧！

React.createElement()

昨天我们有提到说 createElement()，可以带入三个以上的参数，然後会回传 React Element 的物件。让我们试着印出来观察看看。

const element = React.createElement(
'div', 
{ className: 'container' },
'Hello world'
)

console.log(element)

ReactDOM.render(element, document.getElementById('root'))

就让我们来透过上面的 console 印出来的结果，来自行脑补并看图说故事吧！

从结果来看，可以发现我们带进去的三个参数，第一个参数会成为 type 属性的值，第二个参数物件会成为 props 属性的值，而最後一个 'Hello world'，也被收集成在 prop 物件 中的 children 属性的值。

这个时候我们可以发挥科学家的精神，如果我们输入四个或五个参数会怎样？

const element = React.createElement(
'div', 
{className: 'container'},
'Hello world, ',
'React is fun ',
'and i love coding'
)
console.log(element)

ReactDOM.render(element, document.getElementById('root'))

让我们来看看画面与 console 的结果：

除了画面多印出我们新传入的参数外，也可以发现我们多传入的两个参数也被收集成在 prop 物件里 children 属性，而且 children 变成阵列了，所以或许我们可以稍微改写一下写法，而且印出来的结果也会一样。

const element = React.createElement(
'div', 
{  
  children: [
  'Hello world, ', 
  'React is fun ', 
  'and i love coding' 
  ],
  className: 'container'
}
)
console.log(element)

ReactDOM.render(element, document.getElementById('root'))

稍微来简单统整一下到这边为止我们对 React.createElement() 的了解：

1. 会回传 React element (就是一个物件而已)。
2. 第一个参数能够决定最後画面渲染的 type。
3. 第二参数需要是一个 object 会成为 element 的 props 值。
4. 第三个参数之後的值都会被收集在 props 中的 children 阵列。

如果已经熟悉我们上面所知道的结果，那现在想要在画面制造出巢状的 HTML 结构就不是什麽难事了

const greetingEl = React.createElement('span', {}, 'Hello world!, ')
const contentEl = React.createElement('span', {}, 'React is fun and i love coding')

const element = React.createElement(
'div', 
{  
  children: [
    greetingEl,
    contentEl
  ],
  className: 'container'
}
)
console.log(element)

ReactDOM.render(element, document.getElementById('root'))

画面依然会顺利的印出之前的东西，但是仔细看一下 Element 结构，就会发现已经是变成，div 包两个 span 了：

眼尖的你可能会发现，console 跑出了一个警告，说每个 child 应该要有唯一的 key prop。这个问题我们在之後的文章会再介绍。但如果说，你看到警告会很不爽，可以这麽做：

const greetingEl = React.createElement('span', {}, 'Hello world!, ')
const contentEl = React.createElement('span', {}, 'React is fun and i love coding')

const element = React.createElement(
'div', 
{ className: 'container' },
greetingEl,
contentEl
)
console.log(element)

ReactDOM.render(element, document.getElementById('root'))

将两个 child 放回第三、四个参数的位置，这个警告就会消失了。

以上就是今天的内容，有什麽问题都欢迎在下方留言，明天我们就会来介绍常常在用的 JSX 啦。