は、動的に各コンポーネントはまた、その使用方法を示しカップル<code>.jsx</code>ファイルを持っているなど、スライダーのため<code>Slider.jsx</code>、すなわち<code>Combobox.jsx</code>コンボボックスのために、私は<code>Template.jsx</code>という名前のファイルおよびコンポーネントのための3つのファイルを持っているテンプレートファイル

Question

に部品やJSXファイルを反応させるの注入しますおよびドキュメント

コンポーネントコードとそれに対応する使用コードをテンプレートファイルに動的に挿入しようとしています。

Combobox.jsx

export default class Combobox extends React.Component { 
    constructor() {...} 
    ... 
} 

ComboboxInfo.jsx

export default class ComboboxInfo extends React.Component { 
    render() { 
     return (
      <div><h2>This is Info about Combobox </h2></div> 
     ); 
    } 
} 

Template.jsx

export default class Template extends React.Component { 
     render() { 
      return (
       <div>{ComponentName}</div> 
       <div>{ComponentInfo}</div> 
      ); 
     } 
    } 

WebPACKの1つのファイルにすべてのコードをバンドルしているので、それはアクセスを取得することが可能ですファイルツリーに移動し、各コンポーネントファイルをループして、テンプレートファイルに挿入できますか？

たとえば、 'ComponentName' divに 'Combobox'を挿入し、ComboboxInfo.jsx内のレンダリングされたコードをすべて "ComponentInfo" divに挿入する必要があります。これは、私が持っているすべてのコンポーネントに対して繰り返されるはずです。

Answer 1

質問を正しく理解している場合は、別のコンポーネントの内部で1つのコンポーネントを使いたいだけです。このような場合は、反応を調べるのに多くの時間を費やしたいと思うかもしれません。これはおそらくhello worldデモでカバーされるからです。あなたが言及している「注入」は表示されているから要素を防ぐためである場合

import ComponentName from 'components/Combobox' 
import ComponentInfo from 'components/ComboboxInfo' 
export default class Template extends React.Component { 
    render() { 
     return (
      <div><ComponentName /></div> 
      <div><ComponentInfo /></div> 
     ); 
    } 
} 

は、ちょうどJSXを経由してrenderメソッドに条件を追加します。次のような

何かがそのシナリオに働くだろう：これはいくつかの助けであった

const displayComboBox = someBoolValue ? <ComponentName /> : null; 

願っています！