React/JSX Динамическое имя компонента

Question

Я пытаюсь динамически визуализировать компоненты на основе их типа.

Например:

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

Я попробовал решение, предложенное здесь React/JSX dynamic component names

Это дало мне ошибку при компиляции (с помощью browserify для глотка). Он ожидал XML, где я использовал синтаксис массива.

я мог бы решить эту проблему путем создания способа для каждого компонента:

newExampleComponent() { 
    return <ExampleComponent />; 
} 

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

Но это означало бы новый метод для каждого компонента я создаю. Должно быть более элегантное решение этой проблемы.

Я очень открыт для предложений.

Answer 1

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

Вы можете просто сохранить класс компонента в переменной с именем, начинающимся с буквы верхнего регистра. См. HTML tags vs React Components.

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

компилирует

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

Answer 2

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

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

var type = "example"; 

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

Answer 3

Если ваши компоненты являются глобальными, вы можете просто сделать:

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

Answer 4

Я использовал немного другой подход, как мы всегда знаем, что наши фактические компоненты поэтому я решил применить корпус переключателя. Также общее количество компонентов было около 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} /> 

    } 
    } 

Answer 5

Редактировать: Другие ответы лучше, см. Комментарии.

Я решил ту же самую проблему таким образом:

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

Answer 6

Для компонента обертки, простое решение было бы просто использовать 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 }) 
    ) 
    } 
} 

Answer 7

Существует официальная документация о том, как обращаться с такими ситуациями доступна здесь: 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} />; 
} 

Answer 8

Предположим, что мы хотим получить доступ к различным представлениям с динамической загрузкой компонентов. Следующий код дает рабочий пример того, как это сделать, используя строку, проанализированную из строки поиска 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'));