Передача данных из родительского в дочерний компонент (MaterialUI создает стили)? - PullRequest
Новая
       9

Передача данных из родительского в дочерний компонент (MaterialUI создает стили)?

0 голосов
/ 23 апреля 2020

Я довольно новичок в reactjs, и я работаю над простой страницей, которая использует аутентификацию с использованием состояния. Кроме того, для стилизации я использую FrameworkUI MaterialUI.

Я пытаюсь отправить loggedInStatus prop.

Я думаю, что отправляю реквизиты правильно, но Я думаю, что я испортил свой код с получением реквизита ...: S

Мое приложение. js выглядит следующим образом: 

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Home from './components/home/Home';
import SignIn from './components/auth/SignIn';
import Contacto from './components/contacto/Contacto'
import FamCatalog from './components/famCatalog/FamCatalog'
import ProtectedRoute from './components/protected/ProtectedRoute'
import PageError from './components/404/PageError';
class App extends Component {

  constructor() {
    super();
    this.state = {
      loggedInStatus: 'NOT_LOGGED_IN',
      user: {}
    }
  }

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navbar />
          <Switch>
            <Route
              exact
              path='/'
              render={props => (
                <Home {...props} loggedInStatus={this.state.loggedInStatus} />
              )}
            />
            <Route path='/signin' component={SignIn} />
            <ProtectedRoute path='/famcatalog' component={FamCatalog} />
            <Route path='/contacto' component={Contacto} />
            <Route path='*' component={PageError} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Тогда дочерний компонент выглядит следующим образом: 

import React, { Component } from 'react';
import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import cloudComputing from '../../img/cloud-computing.png';
import dashboard from '../../img/dashboard.png';
import data from '../../img/data.png';
import dataSearch from '../../img/dataSearch.png';
import webDevelop from '../../img/web-development.png';

const useStyles = makeStyles({
  root: {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    maxWidth: '75%',
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  texto: {
    padding: 10,

  },
  imagenes: {
    padding: 50,
    display: 'flex',
    justifyContent: 'space-evenly'
  }
});

function Nested() {
  const classes = useStyles();
  return (
    <div className={classes.root} >
      <h1>Status: {this.props.loggedInStatus}</h1>
      <div className={classes.imagenes}>
        <img src={webDevelop} alt='' />
        <img src={cloudComputing} alt='' />
        <img src={dashboard} alt='' />
        <img src={data} alt='' />
        <img src={dataSearch} alt='' />
      </div>

      <Typography variant="h3" gutterBottom align='center'>
        ...Blah, Blah, Blah...
      </Typography>

      <Typography variant="subtitle1" gutterBottom className={classes.texto} align='justify'>
        ...Blah, Blah, Blah...
      </Typography>

    </div >
  )
}

class Home extends Component {

  constructor(props) {
    super(props);
  }
  
  render() {
    return <Nested />
  }
}

export default Home;

Я не могу получить реквизит. У меня все еще есть ошибка: " TypeError: Невозможно прочитать свойство 'props' из неопределенного ", а также есть предупреждение, говорящее Бесполезный конструктор для конструктора, созданного внутри Home класс.

Я пытаюсь реализовать рабочий процесс, описанный в: https://www.youtube.com/watch?v=zSt5G3s3OJI внутри моего кода. Поскольку у меня не было компонента класса, мне нужно было переставить свой компонент Home , чтобы он удовлетворял компоненту класса, следуя инструкциям в (возможно, здесь ошибка ...):

https://material-ui.com/styles/advanced/

Любые советы о том, что я делаю неправильно, будут очень хорошо приняты!

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

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

Чтобы ответить респонденту @HermitCrab, мой новый дом. js компонент: 

import React, { Component } from 'react';
import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import cloudComputing from '../../img/cloud-computing.png';
import dashboard from '../../img/dashboard.png';
import data from '../../img/data.png';
import dataSearch from '../../img/dataSearch.png';
import webDevelop from '../../img/web-development.png';

const useStyles = makeStyles({
  root: {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    maxWidth: '75%',
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  texto: {
    padding: 10,

  },
  imagenes: {
    padding: 50,
    display: 'flex',
    justifyContent: 'space-evenly'
  }
});

class Home extends Component {

  constructor(props) {
    super(props);
  }

  function Nested() {
    const classes = useStyles();
    return (
      <div className={classes.root} >
        {/* <h1>Status: {this.props.loggedInStatus}</h1> */}
        <div className={classes.imagenes}>
          <img src={webDevelop} alt='' />
          <img src={cloudComputing} alt='' />
          <img src={dashboard} alt='' />
          <img src={data} alt='' />
          <img src={dataSearch} alt='' />
        </div>
  
        <Typography variant="h3" gutterBottom align='center'>
          ... some text ...
        </Typography>
  
        <Typography variant="subtitle1" gutterBottom className={classes.texto} align='justify'>
         ... some text ...
        </Typography>
  
      </div >
    )
  }

  render() {
    return <Nested />
  }
}

export default Home;

И я получаю эту ошибку: ошибка

заранее спасибо!

РЕДАКТИРОВАТЬ # 2

Я пробую пару вещей. Вот как я ввел содержимое функции в домашний компонент: 

import React, { Component } from 'react';
import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import cloudComputing from '../../img/cloud-computing.png';
import dashboard from '../../img/dashboard.png';
import data from '../../img/data.png';
import dataSearch from '../../img/dataSearch.png';
import webDevelop from '../../img/web-development.png';

const useStyles = makeStyles({
  root: {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    maxWidth: '75%',
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  texto: {
    padding: 10,

  },
  imagenes: {
    padding: 50,
    display: 'flex',
    justifyContent: 'space-evenly'
  }
});

class Home extends Component {

  constructor(props) {
    super(props);
  }

  render() {

    const classes = useStyles();

    return (
      <div className={classes.root} >
        {/* <h1>Status: {this.props.loggedInStatus}</h1> */}
        <div className={classes.imagenes}>
          <img src={webDevelop} alt='' />
          <img src={cloudComputing} alt='' />
          <img src={dashboard} alt='' />
          <img src={data} alt='' />
          <img src={dataSearch} alt='' />
        </div>

        <Typography variant="h3" gutterBottom align='center'>
          ... TEXT
        </Typography>

        <Typography variant="subtitle1" gutterBottom className={classes.texto} align='justify'>
         ... TEXT
        </Typography>

      </div >
    )
  }
}

export default Home;

В местном: 3000 Я получаю следующую ошибку:

ошибка в браузере

I Я совершенно потерян здесь. Как включить вложенную функцию в класс Home для получения реквизита?

Любой совет будет очень хорошо принят.

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

1 Ответ

0 голосов
/ 23 апреля 2020

Ваша функция Nested находится за пределами вашего Home компонента, поэтому this не определено, и вы не можете получить доступ к this.props. Вы должны переместить вложенную функцию в ваш домашний компонент, если вы хотите иметь доступ к реквизиту, переданному в Home

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...