Я намагаюся динамічно відтворювати компоненти залежно від їх типу.

Наприклад:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; 
// Returns <examplecomponent />  instead of <ExampleComponent />

Я спробував рішення, запропоноване тут, назви динамічних компонентів React / JSX

Це дало мені помилку під час компіляції (використовуючи перегляд для gulp). Він очікував XML там, де я використовував синтаксис масиву.

Я міг би вирішити це, створивши метод для кожного компонента:

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

Але це означатиме новий метод для кожного створеного нами компонента. Має бути більш елегантне рішення цієї проблеми.

Я дуже відкритий до пропозицій.

<MyComponent />компілюється в React.createElement(MyComponent, {}), який очікує рядок (тег HTML) або функцію (ReactClass) в якості першого параметра.

Ви можете просто зберегти свій компонентний клас у змінній з іменем, що починається з великої літери. Див. Теги HTML проти компонентів React .

var MyComponent = Components[type + "Component"];
return <MyComponent />;

компілює до

var MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});

Офіційна документація щодо вирішення подібних ситуацій є тут: https://facebook.github.io/react/docs/jsx-in-depth.html#choosing-the-type-at-runtime

В основному це говорить:

Неправильно:

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
    photo: PhotoStory,
    video: VideoStory
};

function Story(props) {
    // Wrong! JSX type can't be an expression.
    return <components[props.storyType] story={props.story} />;
}

Правильно:

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
    photo: PhotoStory,
    video: VideoStory
};

function Story(props) {
    // Correct! JSX type can be a capitalized variable.
    const SpecificStory = components[props.storyType];
    return <SpecificStory story={props.story} />;
}

Повинен бути контейнер, який відображає назви компонентів для всіх компонентів, які повинні використовуватись динамічно. Класи компонентів повинні бути зареєстровані в контейнері, оскільки в модульному середовищі інакше немає єдиного місця, де можна було б отримати доступ до них. Класи компонентів не можуть бути ідентифіковані за їх іменами, не вказуючи їх чітко, оскільки функція nameу виробництві спрощена.

Карта компонентів

Це може бути звичайний об'єкт:

class Foo extends React.Component { ... }
...
const componentsMap = { Foo, Bar };
...
const componentName = 'Fo' + 'o';
const DynamicComponent = componentsMap[componentName];
<DynamicComponent/>;

Або, Mapнаприклад:

const componentsMap = new Map([[Foo, Foo], [Bar, Bar]]);
...
const DynamicComponent = componentsMap.get(componentName);

Звичайний об’єкт є більш підходящим, оскільки він отримує вигоду від скорочення власності.

Модуль ствола

Модуль барила з іменованих експортом може виступати в якості такої карти:

// Foo.js
export class Foo extends React.Component { ... }

// dynamic-components.js
export * from './Foo';
export * from './Bar';

// some module that uses dynamic component
import * as componentsMap from './dynamic-components';

const componentName = 'Fo' + 'o';
const DynamicComponent = componentsMap[componentName];
<DynamicComponent/>;

Це добре працює з одним класом у стилі коду модуля.

Декоратор

Декоратори можна використовувати з компонентами класу для синтаксичного цукру, для цього все одно потрібно чітко вказати назви класів та зареєструвати їх на карті:

const componentsMap = {};

function dynamic(Component) {
  if (!Component.displayName)
    throw new Error('no name');

  componentsMap[Component.displayName] = Component;

  return Component;
}

...

@dynamic
class Foo extends React.Component {
  static displayName = 'Foo'
  ...
}

Декоратор може бути використаний як компонент вищого порядку з функціональними компонентами:

const Bar = props => ...;
Bar.displayName = 'Bar';

export default dynamic(Bar);

Використання нестандартноїdisplayName замість випадкової властивості також виграє налагодження.

Я придумав нове рішення. Зверніть увагу, що я використовую модулі ES6, тому мені потрібен клас. Ви можете також визначити новий клас React.

var components = {
    example: React.createFactory( require('./ExampleComponent') )
};

var type = "example";

newComponent() {
    return components[type]({ attribute: "value" });
}

Якщо ваші компоненти глобальні, ви можете просто зробити:

var nameOfComponent = "SomeComponent";
React.createElement(window[nameOfComponent], {});

Для компонента обгортки простим рішенням буде просто використовувати React.createElementбезпосередньо (використовуючи ES6).

import RaisedButton from 'mui/RaisedButton'
import FlatButton from 'mui/FlatButton'
import IconButton from 'mui/IconButton'

class Button extends React.Component {
  render() {
    const { type, ...props } = this.props

    let button = null
    switch (type) {
      case 'flat': button = FlatButton
      break
      case 'icon': button = IconButton
      break
      default: button = RaisedButton
      break
    }

    return (
      React.createElement(button, { ...props, disableTouchRipple: true, disableFocusRipple: true })
    )
  }
}

У всіх варіантах карт компонентів я не знайшов найпростішого способу визначення карти за допомогою короткого синтаксису ES6:

import React from 'react'
import { PhotoStory, VideoStory } from './stories'

const components = {
    PhotoStory,
    VideoStory,
}

function Story(props) {
    //given that props.story contains 'PhotoStory' or 'VideoStory'
    const SpecificStory = components[props.story]
    return <SpecificStory/>
}

Маючи карту зовсім не добре з великою кількістю компонентів. Я насправді здивований, що ніхто не запропонував щось подібне:

var componentName = "StringThatContainsComponentName";
const importedComponentModule = require("path/to/component/" + componentName).default;
return React.createElement(importedComponentModule); 

Цей дійсно мені допоміг, коли мені потрібно було надати досить велику кількість компонентів, завантажених у вигляді масиву json.

Припустимо, ми хочемо отримати доступ до різних поглядів з динамічним завантаженням компонентів. Наступний код дає робочий приклад того, як це досягти, використовуючи рядок, розібраний з рядка пошуку URL-адреси.

Припустимо, ми хочемо отримати доступ до сторінки "snozberrys" з двома унікальними переглядами за допомогою цих URL-адрес:

'http://localhost:3000/snozberrys?aComponent'

і

'http://localhost:3000/snozberrys?bComponent'

ми визначаємо контролер нашого перегляду так:

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom'
import AComponent from './AComponent.js';
import CoBComponent sole from './BComponent.js';

const views = {
  aComponent: <AComponent />,
  console: <BComponent />
}

const View = (props) => {
  let name = props.location.search.substr(1);
  let view = views[name];
  if(view == null) throw "View '" + name + "' is undefined";
  return view;
}

class ViewManager extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route path='/' component={View}/>
        </div>
      </Router>
    );
  }
}

export default ViewManager

ReactDOM.render(<ViewManager />, document.getElementById('root'));

Припустимо, у нас є flag, що не відрізняється від stateабо props:

import ComponentOne from './ComponentOne';
import ComponentTwo from './ComponentTwo';

~~~

const Compo = flag ? ComponentOne : ComponentTwo;

~~~

<Compo someProp={someValue} />

Якщо прапором Compoзаповнити один із ComponentOneабо, ComponentTwoтоді він Compoможе діяти як Реактивний компонент.

Я використовував дещо інший підхід, оскільки ми завжди знаємо наші фактичні компоненти, тому я думав застосувати корпус комутатора. Також в моєму випадку загальна кількість компонентів не становила 7-8.

getSubComponent(name) {
    let customProps = {
       "prop1" :"",
       "prop2":"",
       "prop3":"",
       "prop4":""
    }

    switch (name) {
      case "Component1": return <Component1 {...this.props} {...customProps} />
      case "Component2": return <Component2 {...this.props} {...customProps} />
      case "component3": return <component3 {...this.props} {...customProps} />

    }
  }

Редагувати: інші відповіді краще, дивіться коментарі.

Я вирішив таку ж проблему таким чином:

...
render : function () {
  var componentToRender = 'component1Name';
  var componentLookup = {
    component1Name : (<Component1 />),
    component2Name : (<Component2 />),
    ...
  };
  return (<div>
    {componentLookup[componentToRender]}
  </div>);
}
...