javascript - dangerouslysetinnerhtml - ¿Cómo evitar envoltura adicional<div> en React?
react components (10)
Aquí hay una forma de representar componentes "transculentos":
import React from ''react''
const Show = (props) => {
if (props.if || false) {
return (<React.Fragment>{props.children}</React.Fragment>)
}
return '''';
};
----
<Show if={yomama.so.biq}>
<img src="https://yomama.so.biq">
<h3>Yoamama</h3>
<Show>
Hoy comencé a aprender ReactJS y después de una hora enfrenté el problema. Quiero insertar un componente que tenga dos filas dentro de un div en la página. Un ejemplo simplificado de lo que estoy haciendo a continuación.
Tengo un html:
<html>
..
<div id="component-placeholder"></div>
..
</html>
Función de renderización como esta:
...
render: function() {
return(
<div className="DeadSimpleComponent">
<div className="DeadSimpleComponent__time">10:23:12</div >
<div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
</div>
)
}
....
Y a continuación llamo render:
ReactDOM.render(<DeadSimpleComponent/>, document.getElementById(''component-placeholder''));
El HTML generado se ve así:
<html>
..
<div id="component-placeholder">
<div class="DeadSimpleComponent">
<div class="DeadSimpleComponent__time">10:23:12</div>
<div class="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
</div>
</div>
..
</html>
El problema de que no estoy muy contento de que React me obligue a envolver todo en un div "DeadSimpleComponent". ¿Cuál es la solución mejor y más simple para ello, sin manipulaciones DOM explícitas?
ACTUALIZACIÓN 28/07/2017: los mantenedores de React agregaron esa posibilidad en React 16 Beta 1
Desde React 16.2 , puedes hacer esto:
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
Creé un componente para envolver componentes secundarios sin un DIV. Se llama un contenedor de sombra: https://www.npmjs.com/package/react-shadow-wrapper
Este requisito se eliminó en la versión React (16.0)] https://reactjs.org/docs/fragments.html , por lo que ahora puede evitar ese contenedor.
Puede usar React.Fragment para representar una lista de elementos sin crear un nodo principal, ejemplo oficial:
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
Más aquí: https://reactjs.org/docs/fragments.html
No podrás deshacerte de ese elemento
div
.
React.render () necesita devolver un nodo DOM válido.
Puede lograr este comportamiento utilizando lo que se conoce como
React.Fragment
introducción del
React.Fragment
en las
versiones más recientes de React
, que le permite devolver múltiples elementos sin la necesidad de crear un elemento contenedor (es decir,
<div>
).
El código se vería así:
render() {
return (
<React.Fragment>
<Element1 />
<Element2 />
</React.Fragment>
);
}
Puedes leer más https://reactjs.org/docs/fragments.html . ¡Espero que eso ayude!
Puedes usar:
render(){
return (
<React.Fragment>
<div>Some data</div>
<div>Som other data</div>
</React.Fragment>
)
}
Para más detalles, consulte https://reactjs.org/docs/fragments.html .
También hay una solución alternativa. El siguiente código de bloque genera un fragmento sin la necesidad de React.Fragment.
return [1,2,3].map(i=>{
if(i===1) return <div key={i}>First item</div>
if(i===2) return <div key={i}>Second item</div>
return <div key={i}>Third item</div>
})
Use [], en lugar de () para envolver todo el retorno.
render: function() {
return[
<div className="DeadSimpleComponent__time">10:23:12</div >
<div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
]
}
Actualización 2017-12-05: React v16.2.0 ahora es totalmente compatible con la representación de fragmentos con soporte mejorado para devolver múltiples elementos secundarios de un método de representación de componentes sin especificar claves en elementos secundarios:
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
Si está utilizando una versión React anterior a v16.2.0, también es posible utilizar
<React.Fragment>...</React.Fragment>
lugar:
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
Original:
React v16.0 introdujo la devolución de una matriz de elementos en el método de renderizado sin envolverlo en un div: reactjs.org/blog/2017/09/26/react-v16.0.html
render() {
// No need to wrap list items in an extra element!
return [
// Don''t forget the keys :)
<li key="A">First item</li>,
<li key="B">Second item</li>,
<li key="C">Third item</li>,
];
}
Por el momento, se requiere una clave para cada elemento para evitar la advertencia de clave, pero esto podría cambiarse en futuras versiones:
En el futuro, probablemente agregaremos una sintaxis de fragmento especial a JSX que no requiere claves.
Esto todavía es necesario , PERO Reaccionar ahora asegúrese de crear elementos sin crear un elemento DOM adicional.
El
createElement
adicional necesario (normalmente con un
div
padre) porque el método
createElement
requiere un parámetro de
type
que
either a tag name string (such as ''div'' or ''span''), a React component type (a class or a function)
.
Pero esto fue antes de que presentaran React
Fragment
.
Consulte este NUEVO documento api para createElement
React.createElement : crea y devuelve un nuevo elemento React del tipo dado. El argumento de tipo puede ser una cadena de nombre de etiqueta (como ''div'' o ''span''), un tipo de componente React (una clase o una función) o un tipo de fragmento React .
Aquí está el ejemplo oficial, Refer React.Fragment .
render() {
return (
<React.Fragment>
Some text.
<h2>A heading</h2>
</React.Fragment>
);
}