2

我对 React 很陌生，来自一个有角度的世界。我有一个场景，我需要动态加载一个组件给一个 searchType 道具。最终用户将有一个他们可以从中选择的 searchTypes 的下拉列表，这个道具在他们单击提交按钮后传递。

我定义了一个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
};

现在，这似乎部分起作用，因为在 chrome 中使用 React 开发工具时，我可以看到提供程序/组件显示在 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 回答