Dynamic JSX имена элементов/теги

Question

Я просто хотел бы знать, если есть лучшие практики подход к визуализации элемента с ReactJS динамически

Рассмотрим эти сценарии:

(1) Параметр Заводская компонента:
параметризируются заводскую компонент, чья работа заключается в визуализации компонент на основе параметра строки, есть способ сделать это без того, чтобы вернуться к React.createElement?

<pre><code>// The following doesn't work 
class Quiz extends React.Component{ 
    constructor (props){ 
    super (props); 
    this.state = { 
     questionText: '', 
     correctAnswer: [], 
     assetType: ['DragNDrop','MultipleChoice','MatchPairs'] 
    } 
    } 
    render(){ 
    const { questionText, correctAnswer } = this.state; 
    return <{this.state.assetType[this.props.typeIndex] />; 
    } 
} 
</code></pre> 

(2) Динамические HTML-теги:
Рендер другой тег заголовка HTML на основе целого ввода. Для этого я изначально попытался использовать строки шаблонов, но должен был прибегнуть к условному рендерингу.

<pre><code>// No joy with Template strings 
render(){ 
    <{`h${this.state.headerSize}`}> 
    {this.state.headerText} 
    </ {`h${this.state.headerSize}`}> 
} 

Мне нравится использовать JSX, и было бы неплохо иметь возможность использовать динамические имена элементов с ней последовательности.

Я также знаю, что:

assetType: ['DragNDrop','MultipleChoice','MatchPairs'] 

могут быть сохранены как:

assetType: [<DragNDrop />,<MultipleChoice />, <MatchPairs />] 

, который будет работать.

Одна проблема с массивом элементов JSX заключается в том, как хранить эти элементы JSX в БД? Я предполагаю, что мне нужно будет хранить их как Strings, но затем как их использовать, когда вытащить бланк из БД?

Может ли кто-нибудь предложить какие-либо рабочие и передовые методы подхода к этим вопросам?

Answer 1

Что касается динамических HTML-теги:

EDIT:
Как документы предполагают, Dynamic types can be used at runtime если первый назначить заглавную переменную первый:

class Quiz extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      questionText: '', 
      correctAnswer: [], 
      assetType: ['DragNDrop', 'MultipleChoice', 'MatchPairs'] 
     } 
    } 
    render() { 
     const ElementNameStartsWithCapitalLetter = this.state.assetType[0]; 
      //^-- capital letter here, ensure this works when used in JSX 
     return <ElementNameStartsWithCapitalLetter />; 
    } 
}

Это в связи с тем, что User Defined JSX Components Must BE Capitalized.

---

Прежние:

Использование React.createElement:

class Quiz extends React.Component{ 
    constructor (props){ 
    super (props); 
    this.state = { 
     questionText: '', 
     correctAnswer: [], 
     assetType: ['DragNDrop','MultipleChoice','MatchPairs'] 
    } 
    } 
    render(){ 
    const { questionText, correctAnswer } = this.state; 
    {React.createElement(
     [this.props.typeIndex], 
     {...questionText, ...correctAnswer} 
    );} 
    } 
} 

Использование условного рендеринга:

// Conditional rendering works, but yuck! 
// One condition per state works 
// <b>but can be unnecessarily verbose</> 
getHeader() { 
    switch(this.state.headerSize){ 
    case 1: 
     return <h1>{ this.state.headerText }; <h1> 
    case 2: 
     return <h2>{ this.state.headerText }<h2> 
    . 
    . 
    . 
    default: 
     return null; 
    } 
} 

render(){ 
    return { this.getHeader() }; // bound correctly in constructor of course :) 
}