Javascript 无法读取未定义属性的属性props

目前正在学习“道具”。在组件内呈现道具时，我在传递“name”和“age”时在编译时出错：

“无法读取未定义的属性‘名称’。”

这是我的密码：

仪表板

import React, { Component } from 'react';
import SummaryWidget from '../../Components/SummaryWidgets/SummaryWidget';

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

  render() {

    return (
      <div className="animated fadeIn">
        <Row>
          <Col xs="12" sm="6" lg="6">

            <SummaryWidget name='David' age='20'/>


          </Col>

          <Col xs="12" sm="6" lg="6">


          </Col>

        </Row>

      </div>
    )
  }
}
export default Dashboard;

import React，{Component}来自'React'；
从“../../Components/SummaryWidgets/SummaryWidget”导入SummaryWidget；
类仪表板扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
)
}
}
导出默认仪表板；

SummaryWidget

import React, { Component } from 'react';

class SummaryWidget extends Component {

  constructor(props) {
    super(props);
  }

  render (props) {
    return (
      <div className="SummaryWidget">
      <span>{props.name}{props.age}</span>
      </div>
    )
  }

}

export default SummaryWidget;

import React，{Component}来自'React'；
类SummaryWidget扩展组件{
建造师（道具）{
超级（道具）；
}
渲染（道具）{
返回(
{props.name}{props.age}
)
}
}
导出默认SummaryWidget；

请将渲染方法更改为

render () {
    return (
      <div className="SummaryWidget">
      <span>{this.props.name}{this.props.age}</span>
      </div>
    )
  }

render（）{
返回(
{this.props.name}{this.props.age}
)
}

顺便说一句：如果你不想在构造函数中做任何事情，你不需要实现它。此外，如果您不需要状态和任何生命周期方法，那么您应该将组件作为无状态组件。比如：

import React from 'react';

const SummaryWidget = ({ name, age }) => (
  <div className="SummaryWidget">
    <span>{name}{age}</span>
  </div>
);

export default SummaryWidget;

从“React”导入React；
const SummaryWidget=（{name，age}）=>(
{name}{age}
);
导出默认SummaryWidget；

请将渲染方法更改为

render () {
    return (
      <div className="SummaryWidget">
      <span>{this.props.name}{this.props.age}</span>
      </div>
    )
  }

render（）{
返回(
{this.props.name}{this.props.age}
)
}

顺便说一句：如果你不想在构造函数中做任何事情，你不需要实现它。此外，如果您不需要状态和任何生命周期方法，那么您应该将组件作为无状态组件。比如：

import React from 'react';

const SummaryWidget = ({ name, age }) => (
  <div className="SummaryWidget">
    <span>{name}{age}</span>
  </div>
);

export default SummaryWidget;

从“React”导入React；
const SummaryWidget=（{name，age}）=>(
{name}{age}
);
导出默认SummaryWidget；

将SummayWidget组件从

class SummaryWidget extends Component {

  constructor(props) {
    super(props);
  }

  render (props) {
    return (
      <div className="SummaryWidget">
      <span>{props.name}{props.age}</span>
      </div>
    )
  }

}

class SummaryWidget扩展组件{
建造师（道具）{
超级（道具）；
}
渲染（道具）{
返回(
{props.name}{props.age}
)
}
}

到

class SummaryWidget扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.name}{this.props.age}
)
}
}

您不需要像这样在类组件中添加

render（props）

如果您需要一个类组件，请执行上面的操作，或者如果您需要一个功能组件，请执行@kevin建议的操作

---

将SummayWidget组件从

class SummaryWidget extends Component {

  constructor(props) {
    super(props);
  }

  render (props) {
    return (
      <div className="SummaryWidget">
      <span>{props.name}{props.age}</span>
      </div>
    )
  }

}

class SummaryWidget扩展组件{
建造师（道具）{
超级（道具）；
}
渲染（道具）{
返回(
{props.name}{props.age}
)
}
}

到

class SummaryWidget扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.name}{this.props.age}
)
}
}

您不需要像这样在类组件中添加

render（props）

如果您需要一个类组件，请执行上面的操作，或者如果您需要一个功能组件，请执行@kevin建议的操作