无法读取未定义反应的属性道具

Question

目前学习反应'道具'。当在组件内部渲染道具时，我在传递'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;

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;

Answer 1

请将渲染方法更改为

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;

Answer 2

从中更改SummayWidget组件

class SummaryWidget extends Component {

  constructor(props) {
    super(props);
  }

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

}

至

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

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

}

您不需要在类组件中添加这样的render (props)。

如果您需要类组件，请执行上述操作，或者如果您需要功能组件，请执行@kevin建议。

working demo