react.js 中對props 的理解

-----------------開始---------------------

1. 每個組件都是一個對象；

2.props是對象的一個屬性；

3.組件對象可以通過props傳遞；

----------------代碼截圖說明------------------------

01. 代碼

//組件01
function FancyBorder(props){
    console.log(props)
    return(
        <div className={'FancyBorder FancyBorder-' + props.color}>
            {props.children}
        </div>
    )
}
//組件02
function Dialog(props) {
    console.log(props)
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}
//組件03
function WelcomDialog(){

    return (
        <Dialog title="測試" message="我知道結果"/>
    )
}

02. 將props打印至控制台

可以看到組件1的props有Children 和 color兩個屬性，通過在組件上定義獲得，組件2 有message 和 title兩個屬性，

也是在組件上定義獲得，這樣就比較容易理解了。

---------------到此為止先-------------------

---------------目前個人對react的理解也不是很深，如果本文對您有所幫助，歡迎打賞-----------------