Question

我正在尝试使用PropTypes将样式和文本传递给reactjs组件，但是我收到错误 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."
}

Answer 1

您没有正确提供道具。

$remoteFolderPath = "<remote-folder-path>" createNewRemoteFolder $remoteFolderPath cpItem "<local-folder-path>\*" $remoteFolderPath function createNewRemoteFolder($newFolderPath) { $scriptStr = "New-Item -Path $newFolderPath -type directory -Force" $scriptBlock = [scriptblock]::Create($scriptStr) runScriptBlock $scriptBlock } function runScriptBlock($scriptBlock) { Invoke-Command -ComputerName $server -Credential $MySecureCreds -ScriptBlock $scriptBlock } function cpItem($from, $to) { Copy-Item -Path $from -Destination $to -ToSession $session -Verbose -Recurse }

与export default withStyles(AppStyle, Typos)(SurveyApp);不符合你的想法。

除此之外，您对Typos有两种不同的定义：header和header。您通过_header传递的样式为withStyles，来自_header。这是你应该使用的那个。

您不应该尝试通过AppStyle传递非样式信息，这就是您尝试使用withStyles时的样子。那些需要从父组件进入，或者因为这是父组件，只需使用导入的Typos。

我建议你read more on props in general更好地了解它们是如何使用的。

将来，您可能会发现使用React's Context更适合处理样式。

将多个道具传递给react-materialui中的组件

1 个答案: