使用 JSX 和 ES6 响应加载动态模板

Question

我是 React 的新手，来自 angular 世界。我有一个场景，我需要动态加载一个组件给 searchType 道具。最终用户将有一个他们可以从中选择的搜索类型的下拉列表，这个道具是在他们点击提交按钮后传入的。

我定义了一个 SearchResults 组件，应该根据 this.props.searchType.name[ 的值动态加载适当的组件=12=]

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 我可以看到 provider/component 出现在 DOM.. 但它没有渲染。

我只是不确定下一步该去哪里，或者我做错了什么。

Answer 1

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

var searchTypes = {
  Material,
  Vendor,
};

// ...

    var Component = searchTypes[searchType.name];

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

这是一个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 和 ES6 响应加载动态模板

React Loading a Dynamic Template using JSX & ES6

ecmascript-6

reactjs

redux