向React组件传递Props触发未捕获错误：Objects are not valid as a React child

核心错误原因 #

你遇到的Objects are not valid as a React child错误，本质是直接尝试渲染整个props对象导致的：

• 在App.js中，你通过<Demo1 props={counter}/>把计数器值传给了组件的props属性（这里的props是你自定义的属性名，并非React原生的props对象）
• 在Demo1.js中，你直接写<h2> Props are {props} </h2>，此时props是React传入的完整属性对象（结构为{ props: 计数器数值 }），React无法渲染对象类型的子元素。

另外，React Profiler卡住大概率是因为组件渲染抛出错误，导致DevTools无法正常解析组件树，修复代码后该问题会自动解决。

代码修复步骤 #

1. 修正App.js的组件传参方式 #

把自定义属性名改成更清晰的命名（比如counter），避免和React的props对象混淆：

// App.js 中修改这一行
{Demo1visibility && <Demo1 counter={counter}/>}

2. 修正Demo1.js的props读取方式 #

读取具体的属性值，而非整个props对象：

// Demo1.js 中修改返回部分
return (
  <div>
    <h1> This is Demo1 component </h1>
    <h2> Counter value from parent: {props.counter} </h2>
  </div>
);

也可以用解构赋值简化代码：

// Demo1.js 直接解构props
function Demo1 ({ counter }) {
  return (
    <div>
      <h1> This is Demo1 component </h1>
      <h2> Counter value from parent: {counter} </h2>
    </div>
  );
}

额外优化建议 #

• 变量名Demo1visibility改成小驼峰命名demo1Visibility，符合React代码规范
• 按钮的onClick回调参数可简化，比如() => setCounter(count => count + 1)，因为你并未用到事件对象previous

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