React传递类实例作为props时子组件丢失原有属性和方法如何解决？

你存在非常明确的写法错误，核心问题是对React函数组件的入参规则理解有误：函数组件的第一个入参是所有传入属性组成的props对象，并不是你单独传入的chess属性本身。

你当前写法里子组件内打印的chess变量，实际是如下结构的props对象：

{
  chess: 你在App.js中创建的Chess类实例
}

你误以为打印的是Chess实例，实际打印的是外层props对象，自然看不到原实例的属性和方法。

正确写法 #

两种常用写法可解决问题：

• 写法1：解构props直接获取对应属性

const ChildComponent = ({ chess }) => {
  console.log("chess", chess);
};

• 写法2：先接收完整props对象，再按需读取属性

const ChildComponent = (props) => {
  console.log("chess", props.chess);
};

修改后打印的内容就和App.js中的Chess实例完全一致，原有实例属性和方法都可以正常访问。

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