props в приложении не работает в другом компоненте - PullRequest
Новая
       66

props в приложении не работает в другом компоненте

0 голосов
/ 06 августа 2020

В настоящее время работаю над проектом для заказчика. Я создаю свой интерфейс в ReactJs, и я должен использовать проверку входа в систему. Пока я в системе, я хочу изменить свою кнопку «Выйти». И по продукту, который я хочу показать в корзине, но он вообще ничего не показывает по loggedIn: true в приложении. js

Код:

Приложение. js

state = {
 name: "Tapijtboerderij",
 winkelmand: 0,
 gebruiker: null,
 product: null,
 loggedIn: true
}

render() {
 return (
  <div className="App" >

    <Menu props={this.state} />
}

Меню. js (сделано в React.Router)

Строка кода от маршрутизатора к компоненту. 

import React from 'react'
import { BrowserRouter as Router, Route } from "react-router-dom";
import LinkTo from './link';

import Index from "../pages/index";
import Tapijt from "../pages/tapijt";
import Vloeren from "../pages/vloeren";
import Zonwering from "../pages/zonwering";
import Gordijnen from "../pages/gordijnen";
import Contact from "../pages/contact";
import Login from "../pages/login";
import Product from "../pages/product";
import Page404 from "../pages/404";

import AlgemeneVoorwaarden from "../voorwaarden/algemene-voorwaarden";
import CookieBeleid from "../voorwaarden/cookie-beleid";
import PrivacyBeleid from "../voorwaarden/privacy-beleid";
import Sitemap from "../voorwaarden/sitemap";

import logo from "../logo/logo.jpg";
import Button from "./button";

export default class Menu extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        collapsed: false,
        widthOverlay: 0
    }
}

collapseMenu = () => {
    let strepen = document.querySelectorAll(".streep");

    if (this.state.collapsed === false) {
        strepen[0].style.transform = "rotate(-45deg)";
        strepen[0].style.marginTop = "7px";
        strepen[1].style.display = "none";
        strepen[2].style.transform = "rotate(45deg)";
        strepen[2].style.marginTop = "-7px";

        this.setState({
            collapsed: !this.state.collapsed,
            widthOverlay: "60%"
        });

    } else {
        strepen[0].style.transform = "rotate(0deg)";
        strepen[0].style.marginTop = "0";
        strepen[1].style.display = "block";
        strepen[2].style.transform = "rotate(0deg)";
        strepen[2].style.marginTop = "0";

        this.setState({
            collapsed: false,
            widthOverlay: 0
        })
    }
}

render() {
    return (
        <Router>
            <nav className="menu">
                <div className="container">
                    <a href="/" className="brand-logo to-left">
                        <img src={logo} className={"menu-logo"} alt={"logo bedrijf"} />
                    </a>
                    <div className={"links to-right menu-laptop"}>
                        <div className={"menu-links-laptop"}>
                            <LinkTo to="/" name={"Home"} />
                            <LinkTo to="/src/pages/tapijt" name={"Tapijt"} />
                            <LinkTo to="/src/pages/vloeren" name={"Vloeren"} />
                            <LinkTo to="/src/pages/zonwering" name={"Zonwering"} />
                            <LinkTo to="/src/pages/gordijnen" name={"Gordijnen"} />
                            <LinkTo to="/src/pages/contact" name={"Contact"} />
                            {this.props.loggedIn ? <Button link={"/src/pages/login"} buttonName={"Log uit"} /> : <Button link={"/src/pages/login"} buttonName={"Log in"} />}
                        </div>
                    </div>
                </div>
            </nav>

            <div className="sidenav" id="mobile-demo" style={{
                width: `${this.state.widthOverlay}`
            }}>

                <div className={"menu-icon"} onClick={this.collapseMenu}>
                    <div className={"strepen"}>
                        <div className={"streep"} />
                        <div className={"streep"} />
                        <div className={"streep"} />
                    </div>
                </div>

                <div className={"links-mobile"}>
                    <LinkTo to="/" name={"Home"} />
                    <LinkTo to="/src/pages/tapijt" name={"Tapijt"} />
                    <LinkTo to="/src/pages/vloeren" name={"Vloeren"} />
                    <LinkTo to="/src/pages/zonwering" name={"Zonwering"} />
                    <LinkTo to="/src/pages/gordijnen" name={"Gordijnen"} />
                    <LinkTo to="/src/pages/contact" name={"Contact"} />
                    <LinkTo to="/src/pages/login" name={"Log in"} />
                </div>
            </div>

            <Route path="/" exact component={Index} />
            <Route path="/src/pages/tapijt" component={<Tapijt loggedIn={this.props.loggedIn} />} />
            <Route path="/src/pages/vloeren" component={Vloeren} />
            <Route path="/src/pages/zonwering" component={Zonwering} />
            <Route path="/src/pages/gordijnen" component={Gordijnen} />
            <Route path="/src/pages/contact" component={Contact} />
            <Route path="/src/pages/login" component={Login} />
            <Route path="/src/pages/product" component={Product} />
            <Route path="/src/pages/404" component={Page404} />
            <Route path="/src/voorwaarden/algemene-voorwaarden" component={AlgemeneVoorwaarden} />
            <Route path="/src/voorwaarden/cookie-beleid" component={CookieBeleid} />
            <Route path="/src/voorwaarden/privacy-beleid" component={PrivacyBeleid} />
            <Route path="/src/voorwaarden/sitemap" component={Sitemap} />
        </Router >
    );
}

}

Tapijt. js

 render() {
    return (
        <div className={"container"}>
            <h1 className={"header"}>Tapijten</h1>

            <div className={"parent"}>
                <div className={"flex"}>
                    {tapijten.map((tapijt, identifier) =>
                        <Card key={identifier}
                            photo={TapijtImg}
                            productHeader={tapijt}
                            productContent={"Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32."}
                            link={"./product"}
                            buttonName={"Ga naar Product"}
                            loggedIn={this.state.loggedIn} />)}
                </div>
            </div>
        </div>
    )
}

Продукт. js

import React from 'react';

import ProductImage from "../images/tapijt.jpg";
import Button from "../components/button";

let productSpecifications = [["Lengte: ", 1200], ["Breedte: ", 1000], ["Soort: ", "Hoogpolig 
saxony"], ["Prijs per vierkante M(2): ", 4.85]];

class Product extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        data: productSpecifications
    }
}

render() {
    return (
        <div className={"container top-40"}>
            <div className={"flex half-om-half"}>
                <div className={"product-photo"}>
                    <img src={ProductImage} className={"product-img"} alt={"product foto"} />
                </div>
                <div className={"product-info"}>
                    <h1 className={"product-header"}>Product Header can Kania</h1>
                    <p>
                        Is it possible to use CSS pseudo-classes to select even and odd instances of list items?
                        I'd expect the following to produce a list of alternating colors, but instead I get a list of blue items:
                    </p>

                    <h2 className={"product-price"}>679,-</h2>
                    {/*{this.props.loggedIn ? <Button link={"#"} buttonName={"In Winkelmand"} /> : ""}*/}
                    {this.props.loggedIn ? <Button backgroundColor={"var(--success-color)"} color={"var(--white)"} link={"#"} buttonName={"In Winkelmand"} /> : ""}
                </div>
            </div>

            <div className={"product-specifications"}>
                <h2>Details</h2>
                <table>
                    <tbody>
                        {this.state.data.map((data) => <ul>{data}</ul>)}
                    </tbody>
                </table>
            </div>
        </div>
    )
}
}

export default Product;

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 06 августа 2020

просто для того, чтобы быть на той же странице.

Вы передаете свой объект Props с именем state из приложения. js в компонент меню. Итак, я предполагаю, что вы правильно проверяете this.props.state внутри компонента меню?

<Route path="/src/pages/tapijt" component={<Tapijt loggedIn={this.props.loggedIn} />} />

Откуда взялась эта строка кода?

Верно теперь мне не хватает контекста, в котором вы передаете свои реквизиты (loggedIn: true / false) своему продукту. js

Было бы здорово, если бы вы могли поделиться своим могуществом через CodePen или JSFiddle, например,

РЕДАКТИРОВАТЬ:

Вы можете попробовать сделать это так: 

// Inside of App.js

const userInfo = {
 name: "Tapijtboerderij",
 winkelmand: 0,
 gebruiker: null,
 product: null,
 loggedIn: true
}

render() {
 return (
    <div className="App" >
        <Menu {...userInfo} />
    </div>
}


// Inside of Menu.js

export default class Menu extends React.Component {

...

constructor(props) {
 super(props);

    this.state = {
        collapsed: false,
        widthOverlay: 0
    }
}

...

render() {
 return(
    <Router>
        <nav className="menu">
            <div className="container">
                <a href="/" className="brand-logo to-left">
                    <img src={logo} className={"menu-logo"} alt={"logo bedrijf"} />
                </a>
                <div className={"links to-right menu-laptop"}>
                    <div className={"menu-links-laptop"}>
                        <LinkTo to="/" name={"Home"} />
                        <LinkTo to="/src/pages/tapijt" name={"Tapijt"} />
                        <LinkTo to="/src/pages/vloeren" name={"Vloeren"} />
                        <LinkTo to="/src/pages/zonwering" name={"Zonwering"} />
                        <LinkTo to="/src/pages/gordijnen" name={"Gordijnen"} />
                        <LinkTo to="/src/pages/contact" name={"Contact"} />
                        {this.props.loggedIn ? <Button link={"/src/pages/login"} buttonName={"Log uit"} /> : <Button link={"/src/pages/login"} buttonName={"Log in"} />}
                    </div>
                </div>
            </div>
        </nav> 
    ...
    </Router>
 )
}

...

}


// Inside of Product.js

class Product extends React.Component {

    constructor(props) {
        super(props);
    
        this.state = {
            data: productSpecifications
        }
    }

    ...

    render() {
        return(
            ...
            {this.props.loggedIn ? <Button backgroundColor={"var(--success-color)"} color={"var(--white)"} link={"#"} buttonName={"In Winkelmand"} /> : ""}
            ...
        )
    }

        
}


```

By using the Spread Attributes like so: `...userInfoà it also make it easy to pass unnecessary props to components.

I hope it helps you.
0 голосов
/ 06 августа 2020

Прежде всего, ваш Маршрут неверен. 

<Route path="/src/pages/tapijt" component={<Tapijt loggedIn={this.props.loggedIn} />} />

Он должен быть 

<Route path="/src/pages/tapijt" render={(props) => (<Tapijt loggedIn={this.props.loggedIn} {...props}/>)}/>

Если вы не обработаете его где-нибудь еще, не отображаемым в текущем фрагменте кода, вы передаете loggedIn значение для Tapijt компонента, но вы как-то не справляетесь с этим. вы используете свойство состояния loggedIn.

Может быть, это 

buttonName={"Ga naar Product"}
loggedIn={this.state.loggedIn} />)}

должно быть этим? 

buttonName={"Ga naar Product"}
loggedIn={this.props.loggedIn} />)}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...