React组件组合使用问题：子组件无法获取父组件传递的Props

我来帮你排查下为什么ProductList组件里this.props是null的问题，以及对应的修复方案：

核心原因 #

你在ProductList组件的构造函数里犯了一个React类组件的常见小错误：调用super()时没有传递props参数。

在React的类组件机制中，如果构造函数没有把props传给super()，那么在构造函数执行阶段this.props会是null或者undefined。虽然React后续会在组件初始化完成后把props赋值给实例，但这会导致你在render方法里提前打印的this.props出现异常。

另外还有个小问题：你当前ProductList的render方法返回的是{}，这不是合法的JSX，React要求组件必须返回一个有效的React元素（比如<div>、<>或者null），否则会抛出渲染错误。

修复方案 #

方案1：修正构造函数，传递props给super() #

修改ProductList.js的代码，确保构造函数接收props并传递给super：

import { Component } from 'react'; // 确保正确导入Component

export default class ProductList extends Component {
  constructor(props) {
    super(props); // 关键：把props传给super
  };
  
  render() {
    console.log(this.props); // 现在应该能正常拿到{itemChange: ƒ}了
    // 调用父组件方法的示例：
    // this.props.itemChange();
    return <div>ProductList组件内容</div>; // 返回合法的JSX
  }
}

方案2：省略不必要的构造函数 #

如果你的ProductList组件不需要在构造函数里做初始化state、绑定方法这类操作，完全可以直接删掉构造函数，React会自动处理props的传递，代码会更简洁：

import { Component } from 'react';

export default class ProductList extends Component {
  render() {
    console.log(this.props);
    // 调用父组件方法
    // this.props.itemChange();
    return <div>ProductList组件内容</div>;
  }
}

这样修改后，你在ProductList里就能正常通过this.props.itemChange()调用父组件CloseableTab里的tpItem方法了。

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