اشتراک گذاری متغیر بین کامپوننت ها

سوال شده توسط: حسین رنجبر

تاریخ ثبت: ۱۴۰۰/۱۲/۲۳

بازدید: 892

پاسخ: 7

تگ: React


سلام استاد وقتتون بخیر. گفته بودید اینجا پرسش مطرح کنم …

متن شما:

"سلام عزیزم کارت عالیه و فقط چند تا نکته تو کدات هست و تحسین می کنم که ایده داری تو کارت. ولی قبلا هم بهتون گفتم برای اشتراک گذاری یک متغیر بین کامپوننت ها راهی دیگه هست مثل context که میگ در ویدئوهای بعدی. و اینکه هیچوقت از متغیری به جز استیت ها استفاده نکنید. منظورم userTime هست که باید در غالب استیت تعریف بشه و در componentDidMount مقدار بگیره. توی پرسش و پاسخ سوال مطرح کنید و بهم اطلاع بدید تا کداتون رو که اصلاح کردم براتون بفرستم تا مشکلتون رو متوجه بشید"

پاسخ ها
user

قاسم بساکی

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

قاسم بساکی

یک بار کامل این کدها رو بررسی کنید. مربوط به کامپوننت تایمر هست

user

حسین رنجبر

خیلی ممنون استاد فهمیدم.

userTime رو توی state تعریف کردید و توی DidMount عدد را دریافت کردید.

فقط یه چیزی الان توی این کد توی قسمت return کامپوننت btnControl رو فراخوانی کردیم و از propt میشه استفاده کرد. اما اگه توی قسمت return کامپوننت رو فراخوانی نکرده باشیم چیجوری میشه که از این state.userTime استفاده کرد؟

user

حسین رنجبر

میخوام بپرسم که با همون روش import { this.state.userTime} from ‘./Timer' میشه استفاده کرد؟ یا یه روش استاندارد تر برای state هست؟

البته داخل {} رو امتحان نکردم درسته یا نه!

user

حسین رنجبر

بالا و پایین کردم ولی متاسفانه نتونستم که از این روش استفاده کنم

الان مثلا میخوام تو کامپوننت text.js از این userTime که state هست استفاده کنم مثلا وقتی صفر شد یه کارایی بکنه

کمک کنید خیلی ممنون میشم استاد

user

قاسم بساکی

بله دقیقا متوجه شدم همون اول چی میخواید

یوزر تایم رو باید توی کامپوننت والد یعنی App تعریف کنید و به صورت prop به همه کامپوننت ها که میخوانش ارسال کرد

راه های دیگه هم مثل context و یا redux هست که توضیح دادم جلوتر

user

حسین رنجبر

خیلی ممنون استاد مرسییی

برای ثبت پاسخ باید خود شوید

محبوب ترین مقالات