Question

我对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 Dev Tools我可以看到提供者/组件出现在DOM中但是它没有呈现。

我不知道从哪里开始，或者我做错了什么。

Answer 1

您尝试使用字符串而不是实际的类。我想你想要这样的东西：

Try to
    Parse hour integer,
    Parse minute integer
If there were errors,
    Write the errors to console.

这里是simple example。

Answer 2

您可以尝试使用switch语句。

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

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

  return (
    //...

    {component}
  )
}

使用JSX＆amp ;;反应加载动态模板ES6

2 个答案: