[#365blog] React Component 之間如何相互溝通?

Badu Huang
Mar 19 · 4 min read

在 React 的世界裡, Component 唯一跟外層溝通的方式就是「props」,而本篇我將討論「一等親」之間的 Component 溝通(父 Component 與 子 Component 的溝通),超過一等親的溝通,通常會用 Redux 解決(雖然有 Context,但它無法跨 DOM 溝通,所以暫時不使用)。

總之記住一個原則,一等親溝通最容易

另外,Component 唯一跟外層溝通的方法是 「props」(再講一遍)。

起手式,我們先來寫一個兒子的 Component:

class ChildComponent extends React.Component {

onClick =() =>{
this.props.onCallParent(new Date().toString());
}
render() {
return (
<div className="child-component">
<h3>ChildComponent</h3>
<p>props.count:{this.props.count}</p>
<button onClick={this.onClick}>call Parent</button>

</div>
);
}
}

在這裡你可以發現, ChildComponent 點擊 button 時會呼叫 onClick function,並在裡面取得了父層 onCallParent 這個 props,並跟父層拿了 count 這個 props。

寫一個爸爸的 Component:

class ParentComponent extends React.Component {
state = {
count: 0,
date: ''
}
componentDidMount(){
this.intervalId = setInterval(() => {
this.setState((state) => {
return { count: state.count + 1 }
});
}, 1000);
}
componentWillUnmount(){
clearInterval(this.intervalId);
}
onCallParent = (date)=>{
this.setState({ date: date })
console.log('onCallParent',date);
}
render () {
const { count, date } = this.state;
return (
<div className="parent-component">
<h1>ParentComponent</h1>
<p>state.count:{count}</p>
<p>state.date:{date}</p>
<ChildComponent
count={count}
onCallParent={this.onCallParent}/>

</div>
);
};
}

在這裡你可以發現, ParentComponent 在 render 時,傳了 count 和 onCallParent 兩個 Props 給 ChildComponent,而值的部分則是它的私有 State 變數 {count},以及 function onCallParent,所有的更新都會以 Props 的形式傳給兒子,而兒子可以再傳 props 回來做更新。

最後在把 ParentComponent 放到 root 上:

ReactDOM.render(
<ParentComponent />,
document.getElementById('app')
);

以下為這篇做一個總結,React 元件互相溝通的重點:

ㄧ、父與子 Component 從外層拿值的方式永遠是拿 Props。
二、State 是個別 Component 的私有變數,在更新後可以在 render 處以 Props 的方式傳給其他 Component。
三、兒子可以藉由 Call 父的 function 來傳新的 Props 給父親,達到溝通。
四、要觸發 Component 重新 Render 只有 Props 或 State 值變動時
五、{ } 表示是 JavaScipt 運算,也就是裡頭的值是會變動的

No Sugar Code

Daily Research & Insights

Badu Huang

Written by

https://baduhuang.xyz

No Sugar Code

Daily Research & Insights

More From Medium

More on Code from No Sugar Code

More on Code from No Sugar Code

More on Code from No Sugar Code

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade