javascript - 在动态创建的 React 组件上设置自定义 Prop

Question

我正在重构我的一些 React 代码，以便在我不能直接使用 Babel 的地方使用方便(例如页面上的嵌入式 JavaScript)。为了帮助解决这个问题，我正在设置一个简短的函数来构建组件并将 Prop 传递给它们。这段代码工作得很好:

components.js:

import ResponsiveMenu from './components/responsive-menu';
window.setupMenu = (items, ele) => {
  ReactDOM.render(<ResponsiveMenu items={items}/>, ele);
}; 

static-js.html:

<div id="menu"></div>
<script>
   setupMenu({ items: [] }, document.getElementById('menu');
</script>

但是，当我尝试将它变成更通用的东西来处理更多组件时，如下所示:

components.js:

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);
    }
  );
};

static-js.html:

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

然后我得到这个错误:Warning: Unknown prop "items" on <ResponsiveMenu> tag. Remove this prop from the element. For details, see (really unhelpful shortened link that SO doesn't want me posting)

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

Answer 1

当您将字符串参数传递给 React.createElement 时，它将创建原生 DOM 元素并且没有有效的 html DOM ResponsiveMenu。

您可以将元素存储到散列中并将其存储到window 变量中。

例子:

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

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