Day 08 - 那些在 component 里的 Props 与 State

如果有错误，欢迎留言指教~ Q_Q

Stateful Component vs no-Stateful Component

function component 其实就是 JavaScript 的 function

传给 function 的参数就是 props 啦~

Stateful Component

const NewsSlider = ({ title, ...props }) => {

    return (
        <div> I am NewsSlider~ { title } </div>
    )
}

no-Stateful Component

const Footer = () => {

    return (
        <div> I am FOOTER </div>
    )
}

<input /> 就是一个元件 input，拥有不同的逻辑跟样式

我们要告诉 input 长出我们需要的样式
我们就需要给 input 元件更多的资讯，让他知道要做什麽事
type= button 一颗按钮
checkbox password 一个密码输入框
radio text 一个文字输入框

我们说type就是input的其中一种属性，
藉由这个属性，我们可以给元件更多资讯，
让他获得更多详细的资讯，更精确完成你想要的画面或是商务逻辑

一个元件也可以有不只一种属性
像是 input 还有 name value id 各自都有各自的功能

<input type="checkbox" class="checkbox" checked="true" />

props: component 接收从外部的资料

props 从上层传进来後，不能直接被修改值，要保持 immutable 的特性

像是 html 的属性，例如：name、href
props 是我们自订的 component 属性 -> prop，全名 property


<Card title="Card1" description="card1 desc">


const Card = (props) => {
  const { title, description } = props;
  return (
    <div className="card">
      <div className="card-title">{title}</div>
      <div className="card-body">{description}</div>
    </div>
  );
};