将数据从父组件传递到子组件（Material UI makestyles）？

Question

我对 reactjs 很陌生，我正在开发一个使用状态进行身份验证的简单页面。此外，对于样式，我使用的是 MaterialUI 框架。

我正在尝试发送 loggedInStatus 属性。

我认为我正确地发送了道具，但我认为我在接收道具时弄乱了我的代码......：S

我的App.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: Cannot read property 'props' of undefined”并且还有一个警告说 Useless constructor for the constructor 在 Home 类。

我正在尝试在我的代码中实现https://www.youtube.com/watch?v=zSt5G3s3OJI 中解释的工作流程。由于我没有类组件，因此我需要重新安排我的 Home 组件以满足以下指南中的类组件（也许这里是错误...）：

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

任何关于我做错的建议都会很受欢迎！

提前致谢！

编辑

为了响应@HermitCrab，我的新 Home.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;

我收到了这个错误：error

提前致谢！

编辑#2

我正在尝试几件事。这是我在 Home 组件中引入功能内容的一种方式：

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 我收到以下错误：

error in browser

我在这里很迷茫。如何在 Home 类中包含嵌套函数以获取道具？

任何建议都会很受欢迎。

提前致谢！

Answer 1

您的函数Nested 在您的Home 组件之外，因此this 未定义，您无法访问this.props。如果您希望能够访问传递给 Home 的道具，则必须将嵌套函数移动到 Home 组件中