動的に作成されたReactコンポーネントにカスタムの小道具を設定する

Question

私はBabelを直接使用できない場所で簡単に使用できるように、リアクションコードをリファクタリングしています。これを助けるために、私はコンポーネントを構築し、それらに小道具を渡す短い関数を設定しています。このコードは正常に動作します：

components.js：

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

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

静的-js.html：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バージョンで動作しない理由を私は理解して助けてください。私は、このエラーを取得する

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

コンポーネントの作成のより多くのマニュアルバージョン。

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)