حسن طاهریان
4 سال پیش توسط حسن طاهریان مطرح شد
5 پاسخ

گرفتن state از کامپوننت فرزند در React

سلام دوستان
من با استفاده از router، یک Route درست کردم که با path بتونه پارامتر بگیره و صفحه هر todo رو نمایش بده ولی وقتی میخوام که todo رو به عنوان props به TodoDetailed در کامپوننت App بدم، چون states ها در Home قرار داره و Route ها در App، نمd تونم به state های Home دسترسی پیدا کنم.
راهی به غیر از انتقال state به App هست؟
App.js

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Home } from './components/pages/Home';
import DetailedTodo from './components/DetailedTodo';

class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <div className="app">
          <Route exact path='/' component={() => <Home getTodo={this.getTodo} />} />
          <Route path="/todos/:todo_id" component={() => <DetailedTodo />}/>
        </div>
      </BrowserRouter>
    )
  }
}

export default App;

Home.js

import React, { Component } from 'react';
import Todos from '../Todos';

export class Home extends Component {
  state = {
    todos: [
      { task: 'Listen *****', id: 1, done: false, decription: 'Listen to New Album' },
      { task: 'Watch Movie', id: 2, done: false, decription: 'Watch Dark' },
      { task: 'Learn React', id: 3, done: false, decription: 'Learn React Router' }
    ],
    filter: ''
  }

  render() {
    return (
      <div className="container pt-5">
          <Todos todos={this.state.todos} />
      </div>
    )
  }
}}

ثبت پرسش جدید
مهدی عقیقی
تخصص : برنامه نویس وب
@MehdiAghighi 4 سال پیش مطرح شد
1

@hassantsf.dev سلام وقتتون بخیر.

بهترین روش استفاده از کانتکست یا ریداکس هست که من کانتکست رو پیشنهاد می‌کنم.
علاوه بر این مورد حتما توی پروژه‌های بزرگ می‌تونید ازش استفاده کنید.

این لینک رو بخونید در مورد کانتکست کمکتون می‌کنه.


alibrave
@alimohammadi1376 4 سال پیش مطرح شد
0

راه دیگه غیر از انتقال state استفاده از redux هستش


woz
تخصص : fan of open source world
@wozniak 4 سال پیش آپدیت شد
0

@hassantsf.dev

این کار رو از نظر تئوری میشه انجام داد. اما در واقع کد اجرا نمیشه و به loopی داخل میشه که به صورت مدوام این اتفاقی که عرض میکنم می افته : فرزند در خواست آپدیت state رو داخل parent میده ، وقتی parent درخواست رو می گیره و state رو آپدیت میکنه باز به این خاطر که داخل componentWillMount مربوط به فرزند کد آپدیت state هست باز parent آپدیت میشه و کد شما کرش میکنه و میافته تو لوپ بینهایت. مگر اینکه کار گرفتن state رو داخل flow اصلی برنامه قرار ندید ( مثلا با یک button باشه ) که در کل این کار یک BEST PRACTICE نیست و شما کدهاتون را باید به صورتی بنویسید که structure خوبی داشته باشه که در آینده به مشکل نخورید.


مهدی عقیقی
تخصص : برنامه نویس وب
@MehdiAghighi 4 سال پیش مطرح شد
1

@hassantsf.dev سلام وقتتون بخیر.

بهترین روش استفاده از کانتکست یا ریداکس هست که من کانتکست رو پیشنهاد می‌کنم.
علاوه بر این مورد حتما توی پروژه‌های بزرگ می‌تونید ازش استفاده کنید.

این لینک رو بخونید در مورد کانتکست کمکتون می‌کنه.


حسن طاهریان
تخصص : برنامه نویس وب
@hassantsf.dev 4 سال پیش مطرح شد
1

@MehdiAghighi
سلام
می خواستم ابتدا بدون state manager انجام بدم ولی طبق پاسخ ها معلوم شد که بهترین راه استفاده از state manager هست
متشکر از پاسختون


مهدی عقیقی
تخصص : برنامه نویس وب
@MehdiAghighi 4 سال پیش مطرح شد
0

@hassantsf.dev خواهش می‌کنم.

به جز استفاده از state manager فقط می‌تونید استیت رو به app منتقل کنید.

چرا نمی‌خواید از state manager استفاده کنید ؟ از کانتکست استفاده کنید خیلی هم ساده و عالیه.


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

ورود یا ثبت‌نام