Javascript 在动态创建的React组件上设置自定义道具

我正在重构我的一些React代码，以便在我无法直接使用Babel的地方（例如在页面上的简短嵌入式JavaScript中）使用。为了帮助实现这一点，我正在设置一个简短的函数来构建组件并向它们传递道具。这段代码工作得很好：

components.js：

static-js.html：

setupComponent（“#菜单”、“响应菜单”、{items:[]}）；

然后我得到这个错误：

警告：标签上的未知道具“items”。从元件上拆下此道具。有关详细信息，请参阅（非常没有帮助的缩短链接，因此不希望我发布）

---

请帮助我理解为什么这适用于JSX版本，而不适用于创建组件的更手动的版本

将字符串参数传递给

React.createElement

时，它将创建本机DOM元素，并且没有有效的html DOM

响应菜单

您可以将元素存储到哈希中，并将其存储到

窗口
变量中

例如：

// store component into window variable
window.components = {
     ResponsiveMenu: ResponsiveMenu
}

//extract component from window variable by name
React.createElement(window.components[name], passProps)

这个警告将我链接到这个页面，最后是：谢谢！我在这件事上撞了好几个小时！
<div id="menu"></div>
<script>
   setupMenu({ items: [] }, document.getElementById('menu');
</script>

import ResponsiveMenu from './components/responsive-menu';
import AnotherComp from './components/another-comp';

window.setupComponent = (selector, name, props) => {
  let eles;

  if (typeof selector == 'string') {
    eles = [];
    let nl = document.querySelectorAll(selector), node;
    for (let i = 0; node = nl[i]; i++) { eles.push(node); }
  } else {
    eles = $.toArray(selector); // A helper function that converts any value to an array.
  }

  return eles.map (
    (ele) => {
      let passProps = typeof props == 'function' ? props(ele) : props;
      return ReactDOM.render(React.createElement(name, passProps), ele);
    }
  );
};

<div id="menu"></div>
<script>
   setupComponent('#menu', 'ResponsiveMenu', { items: [] });
</script>

// store component into window variable
window.components = {
     ResponsiveMenu: ResponsiveMenu
}

//extract component from window variable by name
React.createElement(window.components[name], passProps)