اشتراک گذاری متغیر بین کامپوننت ها
سلام استاد وقتتون بخیر. گفته بودید اینجا پرسش مطرح کنم …
متن شما:
"سلام عزیزم کارت عالیه و فقط چند تا نکته تو کدات هست و تحسین می کنم که ایده داری تو کارت. ولی قبلا هم بهتون گفتم برای اشتراک گذاری یک متغیر بین کامپوننت ها راهی دیگه هست مثل context که میگ در ویدئوهای بعدی. و اینکه هیچوقت از متغیری به جز استیت ها استفاده نکنید. منظورم userTime هست که باید در غالب استیت تعریف بشه و در componentDidMount مقدار بگیره. توی پرسش و پاسخ سوال مطرح کنید و بهم اطلاع بدید تا کداتون رو که اصلاح کردم براتون بفرستم تا مشکلتون رو متوجه بشید"
پاسخ ها
![user](/_ipx/f_webp&q_50&blur_3&s_10x10/codeyad/assets/img/UserAvatars/770b53b7-0eb8-495f-97f5-ee5b84065f32140003140133593610673.jpg)
قاسم بساکی
import React from "react";
// import ReactDOM from 'react-dom';
import './style.css'
import BtnControl from "./btnControl";
// ===================بررسی شود=============================================
// export var userTime = parseInt(prompt("Enter Your Number"));
var interval;
// var rstUserTime = userTime;
class Timer extends React.Component {
constructor() {
super();
this.state = {
time: 10,
// ===================بررسی شود=============================================
rstUserTime:0
}
}
setTime = () => {
this.setState({
// ===================بررسی شود=============================================
time: this.state.time - 1
})
}
componentDidMount() {
// ===================بررسی شود=============================================
let time = prompt("Enter Your Number")
this.setState({
time: time,
rstUserTime: time
})
interval = setInterval(this.setTime, 1000);
}
componentDidUpdate() {
if (this.state.time === 0) {
clearInterval(interval);
alert("Time Out!");
}
}
btnStart = () => {
interval = setInterval(this.setTime, 1000);
}
btnStop = () => {
clearInterval(interval);
}
btnReset = () =>{
this.setState({
time:this.state.rstUserTime
})
}
render() {
return (
<div className="btn">
<div className="timer">
<span>{this.state.time}</span> left
</div>
<BtnControl btnStart={this.btnStart} btnStop={this.btnStop} btnReset={this.btnReset} />
</div>
)
}
}
export default Timer;
![user](/_ipx/f_webp&q_50&blur_3&s_10x10/codeyad/assets/img/UserAvatars/770b53b7-0eb8-495f-97f5-ee5b84065f32140003140133593610673.jpg)
قاسم بساکی
یک بار کامل این کدها رو بررسی کنید. مربوط به کامپوننت تایمر هست
![user](/_ipx/f_webp&q_50&blur_3&s_10x10/codeyad/assets/img/UserAvatars/Default.jpg)
حسین رنجبر
خیلی ممنون استاد فهمیدم.
userTime رو توی state تعریف کردید و توی DidMount عدد را دریافت کردید.
فقط یه چیزی الان توی این کد توی قسمت return کامپوننت btnControl رو فراخوانی کردیم و از propt میشه استفاده کرد. اما اگه توی قسمت return کامپوننت رو فراخوانی نکرده باشیم چیجوری میشه که از این state.userTime استفاده کرد؟
![user](/_ipx/f_webp&q_50&blur_3&s_10x10/codeyad/assets/img/UserAvatars/Default.jpg)
حسین رنجبر
میخوام بپرسم که با همون روش import { this.state.userTime} from ‘./Timer' میشه استفاده کرد؟ یا یه روش استاندارد تر برای state هست؟
البته داخل {} رو امتحان نکردم درسته یا نه!
![user](/_ipx/f_webp&q_50&blur_3&s_10x10/codeyad/assets/img/UserAvatars/Default.jpg)
حسین رنجبر
بالا و پایین کردم ولی متاسفانه نتونستم که از این روش استفاده کنم
الان مثلا میخوام تو کامپوننت text.js از این userTime که state هست استفاده کنم مثلا وقتی صفر شد یه کارایی بکنه
کمک کنید خیلی ممنون میشم استاد
![user](/_ipx/f_webp&q_50&blur_3&s_10x10/codeyad/assets/img/UserAvatars/770b53b7-0eb8-495f-97f5-ee5b84065f32140003140133593610673.jpg)
قاسم بساکی
بله دقیقا متوجه شدم همون اول چی میخواید
یوزر تایم رو باید توی کامپوننت والد یعنی App تعریف کنید و به صورت prop به همه کامپوننت ها که میخوانش ارسال کرد
راه های دیگه هم مثل context و یا redux هست که توضیح دادم جلوتر
![user](/_ipx/f_webp&q_50&blur_3&s_10x10/codeyad/assets/img/UserAvatars/Default.jpg)
حسین رنجبر
خیلی ممنون استاد مرسییی