2

私は角度のある世界から来て、Reactにかなり慣れていません。コンポーネントを動的にロードして searchType プロパティを指定する必要があるシナリオがあります。エンド ユーザーには、選択できる searchTypes のドロップダウンが表示されます。この prop は、送信ボタンをクリックした後に渡されます。

の値に応じて適切なコンポーネントを動的にロードする必要があるSearchResultsコンポーネントを定義しました。this.props.searchType.name

import React, { findDOMNode, Component, PropTypes } from 'react';
import Material from './Material'; // Material Search Results Component
import Vendor from './Vendor'; // Vendor Search Results Component

export default class SearchResults extends Component {
  constructor(props){
    super(props);
  }


  // searchType = {
  //  name: 'Material',
  //  id: 'MATERIAL'
  // }

  render() {
    const { searchType, items, itemsCount } = this.props;

    var ComponentName = searchType.name;

    return (
      <div className='row'>
        <h1>Search Results ({items.length}/{itemsCount})</h1>
        <ComponentName items={items} />
      </div>
    );
  }
}

SearchResults.propTypes = {
  items: PropTypes.array.isRequired
};

現在、クロムで React Dev Tools を使用すると、プロバイダー/コンポーネントが DOM に表示されるのを見ることができるため、これは部分的に機能しているようですが、レンダリングされません。

ここから次にどこに行くべきか、または何か間違っているかどうかはわかりません。

4

2 に答える 2

4

実際のクラスの代わりに文字列を使用しようとしています。私はあなたがこのようなものが欲しいと思います:

var searchTypes = {
  Material,
  Vendor,
};

// ...

    var Component = searchTypes[searchType.name];

    return (
      <div className='row'>
        <h1>Search Results ({items.length}/{itemsCount})</h1>
        <Component items={items} />
      </div>
    );

簡単な例を次に示します。

于 2015-10-13T17:33:08.230 に答える
1

switch ステートメントを試すことができます。

render() {
  //...
  var component;

  switch(searchType.name){
    case "material":
      component = <Material items={items} />
    case "vendor":
      component = <Vendor items={items} />
  }

  return (
    //...

    {component}
  )
}
于 2015-10-13T17:39:05.640 に答える