Solo quería saber si existe un enfoque de mejores prácticas para representar un elemento con ReactJS dinámicamente
Considere estos escenarios:
(1) Componente de fábrica de parámetros:
Un componente de fábrica parametrizado cuyo trabajo es representar un componente basado en un parámetro de cadena , ¿hay alguna forma de hacerlo sin tener que volver a 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) Etiquetas HTML dinámicas:
Representar una etiqueta de encabezado HTML diferente basada en una entrada de número entero. Para esto, inicialmente traté de usar cadenas de plantilla, pero tuve que recurrir a la representación condicional.
<pre><code>// No joy with Template strings render (){ <{`h${this.state.headerSize}`}> {this.state.headerText} </ {`h${this.state.headerSize}`}> }Me gusta usar JSX, y sería bueno poder usar nombres de elementos dinámicos para mantener la coherencia.
También soy consciente de que:
assetType: ['DragNDrop','MultipleChoice','MatchPairs']se puede almacenar como:
assetType: [<DragNDrop />,<MultipleChoice />, <MatchPairs />]que funcionará.
Un problema que tengo con la matriz de elementos JSX es cómo almacenar estos elementos JSX en una base de datos. Supongo que tendría que almacenarlos como Strings , pero luego, ¿cómo usarlos cuando se extraen de la base de datos?
¿Alguien puede sugerir algún enfoque de trabajo y mejores prácticas para estos problemas?
Con respecto a las etiquetas HTML dinámicas:
EDITAR:
Como sugieren los documentos, los tipos dinámicos se pueden usar en tiempo de ejecución si primero se asignan a una variable en mayúscula primero:
class Quiz extends React.Component { constructor(props) { super(props); this.state = { questionText: '', correctAnswer: [], assetType: ['DragNDrop', 'MultipleChoice', 'MatchPairs'] } } render() { const E lementNameStartsWithCapitalLetter = this.state.assetType[0]; // ^ -- capital letter here, ensure this works when used in JSX return <ElementNameStartsWithCapitalLetter /> ; } }Esto se debe al hecho de que los componentes JSX definidos por el usuario deben ESTAR en mayúscula .
SOLUCIONES ANTERIORES:
Usando 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} );} } }Usando representación condicional:
// 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 :) }