React组件从DOM传递属性报错求助（React v16.2.0）

你的问题核心出在app.js里挂载到window的不是BusinessSearch组件类，而是已经实例化完成的React元素，这直接导致React.createElement无法正确创建带props的组件实例。

错误根源 #

你在app.js中的这段代码是关键问题：

import BusinessSearch from "./components/BusinessSearch";
window.BusinessSearch = <BusinessSearch />;

这里的<BusinessSearch />会被编译成React.createElement(BusinessSearch, {})，也就是一个已经生成好的React元素对象，而非组件本身的类。当你后续调用React.createElement(BusinessSearch, {personId:5})时，第一个参数传入的是元素而非组件类，React自然无法基于一个已存在的元素再创建新的组件实例，所以抛出了错误。

修复步骤 #

1. 修改app.js的挂载逻辑，把组件类直接挂到window上，而不是实例化后的元素：

import BusinessSearch from "./components/BusinessSearch";
window.BusinessSearch = BusinessSearch; // 传递组件类本身，而非<BusinessSearch />

2. 保持你的渲染代码不变，现在就能正常传递props了：

ReactDOM.render( 
  React.createElement(BusinessSearch, {personId: 5 }), 
  document.getElementById('business-select-root') 
);

额外说明 #

为什么React v15.6.1能运行？大概率是旧版本对这种非标准写法有一定的容错处理，但这并不是正确的使用方式。React v16+对组件类型的检查更严格，所以直接暴露了这个问题。本质上，React.createElement的第一个参数必须是组件构造函数（类组件）、函数组件，或者原生HTML标签字符串，绝对不能是已创建的React元素。

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