Передача состояния приложения. js дочернему компоненту - PullRequest
Новая
       72

Передача состояния приложения. js дочернему компоненту

0 голосов
/ 01 февраля 2020

Я работаю над главной страницей веб-сайта, и я хотел бы указать c панель навигации / меню для главной страницы и другую для других компонентов (главная страница скрывает de "home" кнопку и другие показывают это).

Проблема, с которой я столкнулся на данный момент, заключается в том, что логика c рендеринга этого меню живет в приложении, и мне трудно найти правильный способ передачи состояния моего компонента приложения в другие компоненты, вероятно, просто из-за отсутствия опыта. 

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
import Main from "./main";
import MapContainer from "./mapcontainer";
import Venue from "./venue";
import Schedule from "./schedule";
import Accommodation from "./accommodation";
import Couple from "./couple";
import Honeymoon from "./honeymoon";
import Uploader from "./uploader";
import Friday from "./friday";
import Saturday from "./saturday"
import Sunday from "./sunday";
import Dresscode from "./dresscode";

export class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            error: false,
            isHome: true
        };        
    }

    componentDidMount() {
        console.log("App mounted");
    }


    render() {

        function HomeComponentMenu(props) {
            return (
                <nav className="header-on-app">
                    <button>Contact Us</button>
                    <button className="logout-btn"><a href="/logout">Logout</a></button>
                </nav>
            );
        }

        function AllOtherComponentsMenu(props) {
            return (
                <nav className="header-on-app">
                    <button><Link to="/">Home</Link></button>
                    <button>Contact Us</button>
                    <button className="logout-btn"><a href="/logout">Logout</a></button>
                </nav>
            );
        }

        const isHome = this.state.isHome;
        let menu;

        if (isHome) {
            menu = <HomeComponentMenu/>;
        } else {
            menu = <AllOtherComponentsMenu/>;
        }

        return (
            <BrowserRouter>

              <nav className="header-on-app">{menu}</nav>
                <div className="app-container">     
                    <Route exact path="/" component={Main} />
                    <Route exact path="/venue" component={Venue}/>
                    <Route exact path="/venuemap" component={MapContainer}/>
                    <Route exact path="/schedule" component={Schedule}/>
                    <Route exact path="/accommodation" component={Accommodation}/>
                    <Route exact path="/couple" component={Couple}/>
                    <Route exact path="/honeymoon" component={Honeymoon}/>
                    <Route exact path="/uploader" component={Uploader} />
                    <Route exact path="/friday" component={Friday} />
                    <Route exact path="/saturday" component={Saturday} />
                    <Route exact path="/sunday" component={Sunday} />
                    <Route exact path="/dresscode" component={Dresscode} />
                </div>
            </BrowserRouter>
        );
    }
}

Компонент, который я хотел бы установить для isHome в значение false 

import MapContainer from "./mapcontainer";


export default class Venue extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            error:false,
        }
    }
    render() {
        return (
            <div className="venue-container">

            <h1>Anna & Rodolfo</h1>
            <h2><span>_______</span> Venue . Local . Veranstalungsort <span>_______</span></h2>
            {this.state.error && <h2 className="error">Ops! Something went wrong.</h2>}

            <div className="grid-container-venue">


                    <div className="item">
                    <img src="venue.png" alt="Avatar" className="image"/> 
                    <div className="background-grid-items">
                    <div className="text-address">
                    <a href="https://www.g71972,15z/data=!4887b!8m2!3d52.47094!4d12.71972">
                        <p>Kulturschloss</p>
                        <p>Abcd.30 3456 Berlin </p>
                        <p>Germany . Alemanha . Deutschland</p>
                    </a>    
                    </div>
                    </div>
                    </div>

                    <div className="item">
                    <img src="website.png" alt="Avatar" className="image"/> 
                    <div className="background-grid-items">
                    <div className="text">
                    <a href="https://www.kult.de/">   
                        <p>To the Website</p>
                        <p>Para o Website</p>
                        <p>Zur Website</p>
                    </a>    
                    </div>
                    </div>
                    </div>

                    <div className="item">
                    <img src="transportation.png" alt="Avatar" className="image"/>    
                    <div className="background-grid-items">
                    <div className="text">
                        <p>Transportation</p>
                        <p>Traslado</p>
                        <p>Transport</p>
                    </div>
                    </div>
                    </div>

                    <div className="item">
                        <div className="background-grid-venue">
                            <div className="map">
                            <MapContainer/>
                            </div>
                        </div>
                    </div>

            </div>
        </div>

        );
    }
}

Так как мои компоненты визуализируются с помощью React Router, я попытался отрендерить пропускающий проход это во встроенной функции, а затем перейти к аргументу, который я создавал, но почему-то это не сработало. Есть ли у вас какие-либо предложения, как решить эту проблему? Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 01 февраля 2020

Чтобы передать реквизит на маршрут реакции, вы должны определить его в функции рендеринга следующим образом:

<Route exact path="/venue" render={(props) => <Venue updateHomeState={this.updateHomeState}/>}/>

Чтобы изменить состояние isHome для родителя, вы можете определить это Функция родительского элемента выглядит следующим образом: 

updateHomeState = (newState) => { 
    this.setState({ isHome: newState }) 
}

И затем вызывается в componentDidMount() вашего дочернего компонента, например this.props.updateHomeState(newState).

0 голосов
/ 01 февраля 2020

Чтобы передать состояние дочернему компоненту, вы должны передать его как реквизиты дочернего компонента.

например 

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import TableView from './TableView'

export default class App extends Component {
  state = {
    item: 'this is the item'
  }

render() {
  return(
    <Router>
      <Route exact path="/home">
        <TableView itemList={this.state.item}></TableView>
      </Route>
    </Router>
  )
}

}

, чтобы получить реквизиты в дочернем компоненте 

import React, { Component } from 'react'

export default class TableView extends Component {
  render(){
    <React.Fragment>
      {this.props.item}
    </React.Fragment>
  }
}

Надеюсь, это поможет

РЕДАКТИРОВАТЬ: Было бы также полезно для отладки, если у вас есть дополнения реагировать devtools в вашем браузере, чтобы проверить, если значения состояния каждого компонента

...