Estou tentando renderizar componentes dinamicamente com base em seu tipo.

Por exemplo:

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

Eu tentei a solução proposta aqui Nomes de componentes dinâmicos React / JSX

Isso me deu um erro ao compilar (usando o browserify para gulp). Esperava XML onde eu estava usando uma sintaxe de matriz.

Eu poderia resolver isso criando um método para cada componente:

newExampleComponent() {
    return <ExampleComponent />;
}

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

Mas isso significaria um novo método para cada componente que eu criar. Deve haver uma solução mais elegante para esse problema.

Estou muito aberto a sugestões.

<MyComponent />compila para React.createElement(MyComponent, {}), que espera uma string (tag HTML) ou uma função (ReactClass) como primeiro parâmetro.

Você pode simplesmente armazenar sua classe de componente em uma variável com um nome que comece com uma letra maiúscula. Veja tags HTML versus componentes de reação .

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

compila para

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

Há uma documentação oficial sobre como lidar com essas situações está disponível aqui: https://facebook.github.io/react/docs/jsx-in-depth.html#choosing-the-type-at-runtime

Basicamente diz:

Errado:

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} />;
}

Corrigir:

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} />;
}

Deve haver um contêiner que mapeie os nomes dos componentes para todos os componentes que devem ser usados ​​dinamicamente. As classes de componentes devem ser registradas em um contêiner, pois no ambiente modular não há outro local onde elas possam ser acessadas. As classes de componentes não podem ser identificadas por seus nomes sem especificá-las explicitamente porque a função nameé minificada na produção.

Mapa de componentes

Pode ser um objeto simples:

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

Ou Mapexemplo:

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

O objeto simples é mais adequado porque se beneficia da abreviação de propriedades.

Módulo barril

Um módulo barril com exportações nomeadas pode atuar como esse mapa:

// 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/>;

Isso funciona bem com uma classe por estilo de código do módulo.

Decorador

Os decoradores podem ser usados ​​com componentes de classe para açúcar sintático, isso ainda requer especificar nomes de classes explicitamente e registrá-los em um mapa:

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'
  ...
}

Um decorador pode ser usado como componente de ordem superior com componentes funcionais:

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

export default dynamic(Bar);

O uso de propriedades não padrão emdisplayName vez de propriedades aleatórias também beneficia a depuração.

Eu descobri uma nova solução. Observe que estou usando os módulos ES6, por isso estou exigindo a classe. Você também pode definir uma nova classe React.

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

var type = "example";

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

Se seus componentes são globais, você pode simplesmente:

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

Para um componente do wrapper, uma solução simples seria usar React.createElementdiretamente (usando o 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 })
    )
  }
}

Em todas as opções com mapas de componentes, não encontrei a maneira mais simples de definir o mapa usando a sintaxe curta do 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/>
}

Ter um mapa não parece nada bom com uma grande quantidade de componentes. Estou realmente surpreso que ninguém tenha sugerido algo assim:

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

Este realmente me ajudou quando eu precisava renderizar uma quantidade bastante grande de componentes carregados em uma forma de matriz json.

Suponha que desejamos acessar várias visualizações com o carregamento dinâmico de componentes. O código a seguir fornece um exemplo prático de como fazer isso usando uma cadeia de caracteres analisada a partir da cadeia de pesquisa de um URL.

Vamos supor que queremos acessar uma página 'snozberrys' com duas visualizações exclusivas usando estes caminhos de URL:

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

e

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

nós definimos o controlador da nossa view assim:

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'));

Suponha que temos um flag, não diferente do stateou props:

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

~~~

const Compo = flag ? ComponentOne : ComponentTwo;

~~~

<Compo someProp={someValue} />

Com a bandeira, Compopreencha com um de ComponentOneou ComponentTwoe, em seguida, ele Compopode agir como um componente de reação.

Eu usei uma abordagem um pouco diferente, como sempre sabemos nossos componentes reais, então pensei em aplicar o caso do switch. Também o número total de componentes estava em torno de 7-8 no meu caso.

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} />

    }
  }

Editar: Outras respostas são melhores, ver comentários.

Eu resolvi o mesmo problema desta maneira:

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