使用 JSX 和 ES6 React 加载动态模板答案

【问题标题】：React Loading a Dynamic Template using JSX & ES6使用 JSX 和 ES6 React 加载动态模板
【发布时间】：2016-01-11 13:21:07
【问题描述】：

我对 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
};

现在，这似乎部分起作用，因为在 chrome 中使用 React 开发工具时，我可以看到提供程序/组件显示在 DOM 中......但它没有呈现。

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

【问题讨论】：

标签： reactjs ecmascript-6 redux

【解决方案1】：

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

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。

【讨论】：

感谢它完美地工作。我没有提到的另一件事是动态加载组件...import ComponentName from './' + ComponentName; 或者如果有一种从基类扩展这些不同组件并导入整个基类及其所有子类的方法？无论哪种方式，感谢您的快速响应！
import 声明是静态的，所以你不能那样做。最终会有一个动态模块加载器。现在，您可以动态生成 import 声明作为构建步骤的一部分。您还可以创建一个模块来导入和重新导出（以某种方式）所有组件，然后将其导入到该组件中。
实际上我最终做了一个 import * as Templates 然后在构造函数中我迭代它并推送到搜索类型似乎工作？
如果你有一个导出每个搜索类型组件的模块，当然可以。在那种情况下，我认为您不需要迭代它并复制到其他一些 var —— 您可以在那时执行 Templates[searchType.name] ，对吗？
您可以将它们放在单独的文件中，并有一个模块（我们称之为components）将它们全部导入和导出。例如。 import Material from './material'; import Vendor from './vendor'; export default {Material, Vendor}; 然后在您在这里说明的组件中，import Components from './components'; /* ... */ var Component = Components[searchType.name];。

【解决方案2】：

你可以试试 switch 语句。

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

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

  return (
    //...

    {component}
  )
}

【讨论】：