componentDidMount（）の実行後にページをロードします
各ページにcomponentDidUpdate（prevProps）は無制限に通話となり、我々は条件を制御する必要があります
componentWillReceiveProps（小道具）これは、親コンポーネントのデータは、あなたがコントロールを持っていない、一度だけ繰り返されていない場合は、サブコンポーネントがイベントを更新する変更です
ページが実行破壊されcomponentWillMount（）
"" "----------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------- "" "
単一ページ内では、親子伝送成分値がより一般的である、伝統的な価値観は、サンズは、コンポーネントを反応させて、値を渡すために同様のアイデアをVUE、親コンポーネントサブアセンブリ、初期親状態は、サブアセンブリがthis.propsを通過することができ受けますA;副成分結合事象親成分値に渡す必要があり、そのイベントは、置換値にthis.props.event上を通過する親コンポーネントであります
発見渡すために親コンポーネントサブアセンブリ：
親コンポーネントのComment.js：
インポートは、「反応」からリアクト
「./ComentList」からインポートComentList
クラスコメントReact.Component {延び
コンストラクタ（小道具）{
スーパー（小道具）。
this.state = {
ARR：[{
"userNameに"： "fangMing"、 "テキスト"： "123333"、 "結果"真
}、{
"userNameに"： "zhangSan"、 "テキスト"： "345555"、 "結果"偽
}、{
"userNameに"： "リージ"、 "テキスト"： "567777"、 "結果"真
}、{
"userNameに"： "wangWu"、 "テキスト"： "789999"、 "結果" ：真
}、
輸出デフォルトのコメント。
サブコンポーネントのComentList.js：
import React from "react"
class
ComentList
extends
React.Component {
constructor(props) {
super
(props);
}
render() {
return
(
<div className=
"list"
>
<ul>
{
this
.props.arr.map(item => {
//这个地方通过this.props.arr接收到父组件传过来的arr，然后在{}里面进行js的循环
return
(
<li key={item.userName}>
{item.userName} 评论是:{item.text}
</li>
)
})
}
</ul>
</div>
)
}
}
export
default
ComentList;
親サブアセンブリコンポーネントに送信された値、
同じことは、コンポーネントの父であります：
import React from "react"
import
ComentList from
"./ComentList"
class
Comment
extends
React.Component {
constructor(props) {
super
(props);
this
.state = {
parentText:
"this is parent text"
,
arr: [{
"userName"
:
"fangMing"
,
"text"
:
"123333"
,
"result"
:
true
}, {
"userName"
:
"zhangSan"
,
"text"
:
"345555"
,
"result"
:
false
}, {
"userName"
:
"liSi"
,
"text"
:
"567777"
,
"result"
:
true
}, {
"userName"
:
"wangWu"
,
"text"
:
"789999"
,
"result"
:
true
},]
}
}
fn(data) {
this
.setState({
parentText: data
//把父组件中的parentText替换为子组件传递的值
},() =>{
console.log(
this
.state.parentText);
//setState是异步操作，但是我们可以在它的回调函数里面进行操作
});
}
render() {
return
(
<div>
//通过绑定事件进行值的运算，这个地方一定要记得.bind(this)，
不然会报错，切记切记，因为通过事件传递的时候
this
的指向已经改变
<ComentList arr={
this
.state.arr} pfn={
this
.fn.bind(
this
)}>
</ComentList>
<p>
text is {
this
.state.parentText}
</p>
</div>
)
}
}
export
default
Comment;
import
React from
"react"
class
ComentList
extends
React.Component {
constructor(props) {
super
(props);
this
.state = ({
childText:
"this is child text"
})
}
clickFun(text) {
this
.props.pfn(text)
//这个地方把值传递给了props的事件当中
}
render() {
return
(
<div className=
"list"
>
<ul>
{
this
.props.arr.map(item => {
return
(
<li key={item.userName}>
{item.userName} 评论是:{item.text}
</li>
)
})
}
</ul>
//通过事件进行传值，如果想得到event，可以在参数最后加一个event，
这个地方还是要强调，
this
，
this
，
this
<button onClick={
this
.clickFun.bind(
this
,
this
.state.childText)}>
click me
</button>
</div>
)
}
}
export
default
ComentList;
