Tengo la siguiente función que genera un fragmento:
const f = (first, last) => { <>{first}{first.indexOf("\'") > 0 ? "" : " "}<i>{last}</i></> }Luego, uso la función en una pieza de HTML.
<Row> here is {f("xxx","yyy")}. </Row>Esperaba exactamente el siguiente resultado:
<div> here is xxx yyy. </div>pero el resultado en la depuración del navegador es el siguiente:
<div> (flex) "here is " "xxx" <i>yyy</i> "." </div>y el navegador se muestra como:
here is xxx yyy (<- this in italic) . Traté de envolver en un <span className="nowrap"> con
span .nowrap { white-space: nowrap; }sin exito
¿Alguien puede proporcionar algo de ayuda?
El inspector solo le muestra los nodos de texto . Puede unir algunos de estos nodos, pero hay un nodo de elemento justo entre el punto y la primera parte de su texto. No hay forma de evitar eso.
{first}{first.indexOf("\'") > 0 ? "" : " "}Se puede escribir como:
{`${first}${first.indexOf("\'") > 0 ? "" : " "}`} Pero como dije, el último . será un nodo de texto después del elemento <i> .
Dicho esto, el navegador (como en la ventana gráfica del documento) debería mostrar estos nodos de texto sin el salto de línea.