React类组件中如何访问并渲染传入的name与age props

嘿，我一眼就看出你卡在怎么访问类组件的props上啦！别担心，这是React初学者常碰到的小问题，咱们一步步来搞定它。

首先要明确：在React类组件里，你可以通过this.props来获取外部传入的属性值。如果你的组件写了constructor构造函数，记得一定要把props参数传给super()，这样this.props才能正常生效（不过就算你不写constructor，React也会自动帮你处理props传递，只是写上是更规范的习惯）。

现在把你的代码修正一下，就能正确渲染name和age了：

import React, { Component } from 'react';
import ReactDOM from 'react-dom/client'; // React 18+ 推荐写法

export default class App extends Component {
  // 可选：如果需要初始化state，就保留构造函数，记得传props给super
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="person">
        {/* 用this.props.name获取传入的name属性 */}
        <h1>{this.props.name}</h1>
        {/* 替换成this.props.age动态显示年龄 */}
        <p>Your age is {this.props.age}</p>
      </div>
    );
  }
}

// React 18+ 渲染方式（官方推荐）
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App name="john" age="37" />);

// 如果你用的是React 17及以下，用旧写法：
// ReactDOM.render(<App name="john" age="37"/>, document.getElementById('root'));

核心要点说明： #

• 在render()方法里，把this.props.属性名放在JSX的{}中，就能把props值渲染到页面上。
• 要是你暂时不需要初始化state，可以直接省略constructor构造函数，代码依然能正常运行，React会默认帮你处理props的传递。
• 额外提一句：React 18版本开始，官方已经弃用了ReactDOM.render，改用createRoot的方式渲染组件，上面的代码也标注了两种版本的写法，你可以根据自己的React版本选择。

这样修改后，页面就会正确显示传入的"john"和"37"啦！

内容的提问来源于stack exchange，提问作者wontone_boys