recat元件介紹

1.1react中元件主要可分為函式元件和類元件，兩者區別是函式元件沒有state和生命週期，故函式元件也稱為 stateless functional components，適用於僅進行簡單渲染操作的元件。

1.2函式元件是：

**1   引入react模組**
** 2 宣告函式 function 元件名()**
**3 向外暴露 export default 元件名**

例：

import react from
'react'
;function
reactheader()
export
default 元件名;

1.3類元件是：步驟：class元件

1.引入react模組
2.宣告類 class 元件名 extends react.component }
3.向外暴露 export default 元件名

例：

import react from
'react'
;class
father
extends
react.component
}export
default father;

父–傳—>子: 用props屬性

例：父元件：

constructor
(props)
}render()
/>)}
}

子元件：

render()
<
/p>
)}

整體效果：

import react from
"react"
;import reactdom from
"react-dom"
;class
parent
extends
react.component;}
foo(data));
}render()
<
/div>
/>
<
/div>);
}}class
sonextends
react.component
;render()
>change parent<
/button>;}
}reactdom.
render
(>
, document.
getelementbyid
("root"))
;

子元件 --> 父元件

步驟：

1、在父元件中宣告乙個函式，用於接收子元件的傳值 2、通過元件屬性的方法，把函式傳遞給子元件 3、在子元件中通過props屬性呼叫父元件的函式，並通過引數傳值 4、在父元件中的函式通過形參接收子元件的傳值

例：

這個是父元件：

import react,
from
'react'
import children from
'./children'
export
default
class
parent
extends
component
}getchildrenmsg
=(result, msg)
=>)}
render()
<
/h2>
<
/h3>
/h3>
>
/>
<
/div>)}
}

這是子元件

import react,
from
'react'
export
default
class
children
extends
component
}toparent=(
)=>
render()
<
/h2>
>子元件傳入給父元件<
/button>
<
/div>)}
}

兩個兄弟元件之間會有乙個共同的父元件，我們都是結合父子傳值的方式來實現兄弟之間的傳值的，即先其中乙個子元件（兄弟元件）向父元件傳值，然後父元件接收到這個值之後再將值傳遞給另外乙個子元件（兄弟元件）

這是父元件：

import react from
'react'
;import son1 from
'./son1'
;import son2 from
'./son2'
;class
father
extends
react.component
}getmess
(msg)
) console.
log(
'哈哈哈哈哈')}
render()
>
<
/son1>
>
>
<
/son2>
<
/react.fragment>)}
}export
default father;

這是子元件1：

import react from
'react'
;class
son1
extends
react.component
render()
>這是son1裡面的資料<
/button>
<
/react.fragment>)}
}export
default son1;

這是子元件2

import react from
'react'
;class
son2
extends
react.component
<
/react.fragment>)}
}export
default son2;

recat元件介紹

pox元件介紹

Android元件介紹

nginx元件介紹

recat元件介紹

pox元件介紹

Android元件介紹

nginx元件介紹

相關推薦