Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

208
Visualizações
¿Cómo insertar un div complejo dentro de una cadena en ReactJs?

Estoy trabajando en un ReactJs y tengo que diseñar un div dentro de una cadena

Aquí está la cadena de la que estoy hablando

 const instruction1 = <div>XXXXXX: xxxx <div>{state.numbers[0]}</div>, xxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxx xxxxxx xxxxxxxxxx</div>

Pero el resultado es algo como esto. ingrese la descripción de la imagen aquí

Pero necesito que el resultado sea así.

ingrese la descripción de la imagen aquí

El problema es que tengo que usar un div porque habrá múltiples elementos dentro de ese div.

¿Por qué el uso de la etiqueta div estropea el diseño?

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

div es un elemento de bloque, significa que en el HTML se verá como en una nueva fila. Intenta usar span en su lugar. No romperá la línea.

Actualización: no estoy seguro de por qué necesita div en absoluto. Parece que podrías poner tus elementos directamente en el div raíz:

 <div>XXXXXX: xxxx {state.numbers[0]}, {state.numbers[1]}, xxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxx xxxxxx xxxxxxxxxx</div>
about 4 years ago · Juan Pablo Isaza Relatório

0

Para solucionar esto, envolví el div en un span y le di display inline-block a ese span

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda