react dangerouslysetinnerhtml javascript reactjs

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



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!



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