javascript - 无法读取未定义 react 的属性 Prop

目前正在学习对“道具”做出反应。在组件内部渲染道具时，传递“名称”和“年龄”时出现编译错误：

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

这是我的代码：

仪表板

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 } 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;

最佳答案

请将渲染方法更改为

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

顺便说一句：如果您不想在构造函数中做任何事情，则不必实现它。另外，如果不需要状态和任何生命周期方法，则应使组件成为无状态组件。喜欢：

import React from 'react';

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

export default SummaryWidget;

关于javascript - 无法读取未定义 react 的属性 Prop ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49090552/