Reactjs 我得到的错误是没有定义道具

我试图实现一个包含可交换项网格的类，但我得到的错误是，在render（）之后的行中没有定义props。我对react还比较陌生，我希望能够实现这个类，以便以后可以添加remove and add特性

import React, { Component } from 'react';
import Swappable from './components/SwappableComponent'
import './App.css';
import DataTable from './components/tableWidget';
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";


const styles = theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: "center",
    color: theme.palette.text.secondary
  }
});

class App extends Component {
    constructor(props) {
      super(props);
    }

    componentDidMount() {

    }

    componentDidUpdate() {

    }

    render() {
      const { classes } = props;

      return (
      <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={12} sm={6}>
            <Paper className={classes.paper}><Swappable id='1' content={<DataTable/>}/></Paper>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Paper className={classes.paper}> <Swappable id='2' content="#2"/></Paper>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Paper className={classes.paper}><Swappable id='3' content="#3"/></Paper>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Paper className={classes.paper}><Swappable id='4' content="#4"/></Paper>
          </Grid>
        </Grid>
      </div>
      );
    }
  }

  App.propTypes = {
    classes: PropTypes.object.isRequired
  };

  export default withStyles(styles)(App);

import React，{Component}来自'React'；
从“./components/SwappableComponent”导入可交换组件
导入“/App.css”；
从“./components/tableWidget”导入数据表；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Grid”导入网格；
常量样式=主题=>({
根目录：{
flexGrow:1
},
论文：{
填充：theme.space.unit*2，
textAlign：“居中”，
颜色：theme.palete.text.secondary
}
});
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
}
componentDidUpdate（）{
}
render（）{
常量{classes}=props；
返回(
);
}
}
App.propTypes={
类：PropTypes.object.isRequired
};
导出默认样式（样式）（应用程序）；

问题是你应该使用

这个.props

而不仅仅是

props

。改变

const { classes } = props;

到

编辑

关于您的评论，您可以这样构造您的状态：

constructor(props){
    super(props)
    this.state = {
        papers: [
            {
             id: 1,
             content: <DataTable />
             xs: 12,
             sm: 6,
            },
            {
             id: 2,
             content: "#2",
             xs: 12,
             sm: 6,
            },
            // All the other papers
        ]
    {
}

构造函数（道具）{
超级（道具）
此.state={
论文：[
{
id:1，
内容：
xs:12,，
sm:6，
},
{
id:2，
内容：“2”，
xs:12,，
sm:6，
},
//所有其他文件
]
{
}

然后，渲染网格，如下所示：

render() {
      const { classes } = this.state;
      return (
      <div className={classes.root}>
        <Grid container spacing={24}>
          {this.state.papers.map(paper => (
            <Grid item xs={paper.xs} sm={paper.sm}>
                <Paper className={classes.paper}><Swappable id={paper.id} content={paper.content}/></Paper>
            </Grid>
         </Grid>
      </div>
   );
}

render（）{
const{classes}=this.state；
返回(
{this.state.papers.map（paper=>(
);
}

道具是类的参数，因此它们应该与它们一起使用

const {classes} = this.props;

---

我认为这应该解决问题

const{classes}=props；

应该是

const{classes}=this.props；

谢谢！它就像一个符咒。如果我想将网格项移动到状态，以便可以根据需要删除和添加，您认为最好的实现方法是什么？@IndushaSembakutti在编辑中回答了您的问题

const {classes} = this.props;