Передача нескольких реквизитов компоненту в response-materialui - PullRequest
Новая
       6

Передача нескольких реквизитов компоненту в response-materialui

0 голосов
/ 09 мая 2018

Я пытаюсь передать стили и текст в компонентactjs, используя PropTypes, но я получаю сообщение об ошибке: TypeError: Невозможно прочитать свойство 'header' из неопределенного и указывает на ошибку {typo.header}

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

App.js: 

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Card, { CardActions, CardContent } from 'material-ui/Card';
import Typography from 'material-ui/Typography';

import './App.css';
import { AppStyle } from "./AppStyle";

import { Typos } from "./AppTypo";

function SurveyApp(props) {
  const { classes, typo } = props;

  return (
    <div className={classes.wrapper}>
      <div className={classes._header}>
      </div>
      <div className={classes._body}>
        <div className={classes.__formContainer}>
        <Card className={classes.card}>
          <CardContent>
            <Typography>
              {typo.header}
            </Typography>
            <Typography>

            </Typography>
          </CardContent>
        </Card>
        </div>
      </div>
    </div>
  );
}

SurveyApp.propTypes = {
  classes: PropTypes.object.isRequired,
  typo: PropTypes.object.isRequired
}
export default withStyles(AppStyle, Typos)(SurveyApp);

AppStyle.js: 

export const AppStyle = {
  wrapper: {
    width: '100%',
    height: '100%',
    position: 'relative'
  },
  _header: {
    width: '100%',
    height: 100,
    backgroundColor: '#295e94',
    position: 'relative'
  },
  _body: {
    width: '100%;',
    height: 'auto',
    minHeight: 'calc(100% - 100px)',
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
    alignContent: 'center',
    alignItems: 'start',
    justifyContent: 'center'
  },
  __formContainer: {
    width: 750,
    position: 'absolute',
    top: -30
  },
  '@media (max-width: 480px)': {
    __formContainer: {
      width: '100%',
      position: 'absolute',
      top: -30
    }
  }
}

AppTypo.js: 

export const Typos = {
  header: "User Experience",
  subHeader: "This is intended to improve your experience."
}

1 Ответ

0 голосов
/ 09 мая 2018

Вы неправильно предоставляете реквизит.

export default withStyles(AppStyle, Typos)(SurveyApp);

Не делает то, что вы думаете, с Typos.

Кроме того, у вас есть два разных определения для header: header и _header. Стиль, через который вы проходите withStyles, это _header от AppStyle. Это тот, который вы должны использовать.

Вы не должны пытаться передавать нестандартную информацию через withStyles, что, похоже, вы пытаетесь сделать с Typos. Они должны входить из родительского компонента, или, поскольку это родитель, просто используйте импортированный Typos.header.

Я рекомендую вам читать больше о реквизитах в целом , чтобы получить лучшее представление о том, что они из себя представляют и как их использовать.

В будущем вы можете использовать React's Context лучше для обработки стилей.

...