[ Day 08 ] 元件的资料传递 - Props

在 Day 06 和 Day 07 中，我们认识了 React.js 的两个 Components : Function Component 和 Class Component 。
这两种类型元件的存在，其实都是想要解决开发网站时某些会一直重复使用到的逻辑和画面。不过，怎麽样才能依照不同页面的需求来更弹性的使用元件呢？
今天这篇就是要来告诉大家如何传递资料给元件并且活用它！那就一起看下去吧～

何谓 Props ？

在 React.js 中，将元件内自订的属性或其他参数整理成一个单一的物件，并将该物件传递给元件。而该物件就叫做 Props 。

这个概念乍听之下好像似懂非懂，没关系～直接带大家来看 React 官网的范例：

// 宣告一个 React Element
const element = <Welcome name="Sara" />;

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

在上面这段程序码中，我们设定一个 React element 并使用了一个 Welcome 的元件，而且在元件当中带入了一个自定义的属性 name 其值为 Sara 。

依照 Props 的定义， name 这个属性会被包在一个叫做 props 的物件当中，所以可以这样来看这个物件：

props: {
    name: "Sara"
}

既然 Props 可以将上面的这个物件传递到元件内部，那我们就来看看传进去的资料是怎麽做处理的？

// Function Component <Welcome>
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

上面程序码中的 Function Component 是我们在 React Element 中所使用的 Welcome 元件 ，并在该元件的函式中带入了一个 props 的参数，而这个 props 的值就是我们刚刚所传入的那个物件。
而且在刚刚上方的程序码中我们也看见 props 这个物件当中确实有一个属性为 name ，这时候要使用该值的话记得要加上 {} 并且用 props.属性 来取值。（这个部分如果不清楚的话，可以回去看 Day 05 了解一下 JSX 语法的规则喔！）
所以这个范例在 ReactDOM.render() 中就会渲染出 Hello, Sara 这串讯息了！

Props 的注意事项

透过上方的范例我们可以了解到， Props 是可以将父层的资料透过物件的形式传递到子层的元件中的。不过在子层的元件内想要去变更 props 物件的值时，就必须要注意了！

Props 是唯独的

这边指的唯独（ read-only ）是代表 props 物件不能在元件内部进行修改。如果我们尝试在元件内部修改 props 的值，就会产生错误讯息的提示了。

备注：上述指的元件包含了 Function Component 和 Class Component

除了自定义的属性名称，还有一个 children

在上方的范例中我们有提过，可以在任何的元件中带入自己定义的属性至其中，并且当作 props 物件将资料传入到元件内部。
不过除了自定义的属性和名称之外，其实元件还有一个内建的 props 属性： children

children 怎麽使用？

跟我们上述范例中将自定义的属性写在元件标签里不一样， children 的写法是将该属性的值直接撰写在元件的开始与结束标签内（意即标签的中间）。

如果使用上面的范例的话，那我们在宣告 element 的地方就要改写成下方的写法：

const element = <Welcome> Sara </Welcome>;

而在 Welcome 元件内，则因为我们改使用了 children 的属性，所以元件内部采用的 props 物件的属性也会改成 children ：

function Welcome(props) {
  return <h1>Hello, {props.children}</h1>;
}

这样的写法就会产生出和上面的范例一模一样的结果：

那今天对於 Props 的介绍就到这边告一个段落，明天我们就要进入到 State 状态的章节罗！
有任何问题还是都非常非常欢迎各位前辈大大们提出和指教唷～
我们下篇见ʘ‿ʘ