Reaccionar colspan no funciona

3 minutos de lectura

avatar de usuario
Tuomas Toivonen

¿Por qué el atributo colspan no tiene efecto en React? Creé un componente simple que representa lo siguiente:

<table border="1">
  <tr>
    <th colspan="2">people are...</th>
  </tr>
  <tr>
    <td>monkeys</td>
    <td>donkeys</td>
  </tr>
</table>

y lo que obtengo es:

ingrese la descripción de la imagen aquí

¿Me estoy perdiendo de algo?

Editar: SOLUCIONADO

Aquí está la solución. React espera el nombre del atributo como colSpan, no colspan. Descubrí esto después de perder una cantidad ridícula de tiempo para descubrir este pequeño hecho malvado.

  • Veo que no hubo ningún problema en tu código. ¿Puedes decir más detalles? Aquí está el violín. Puede ver que colspan está funcionando bien. jsfiddle.net/m2jknr70

    – arefindev

    11 de julio de 2016 a las 8:43

  • Lea la publicación editada. A React no le gusta la sintaxis html de la vieja escuela

    –Tuomas Toivonen

    11 de julio de 2016 a las 8:44

  • Cree una respuesta en lugar de agregarla al texto de la pregunta. Es perfectamente legal en SO responder a sus propias preguntas.

    – luboskrnac

    11 de julio de 2016 a las 8:48

  • Futuros visitantes: también asegúrese de no haber agregado una etiqueta irrelevante para la tabla, como <div></div> dentro de la estructura de la mesa en alguna parte. Si ese es el caso y lo necesita, reemplácelo con un <></> par.

    – aderchox

    19 de enero a las 6:24

de React Diferencias DOM documentación:

Todas las propiedades y atributos del DOM (incluidos los controladores de eventos) deben tener un formato de camello para que sean coherentes con el estilo estándar de JavaScript.

Si revisa la consola de su navegador, verá que React le advierte sobre esto:

<meta charset="UTF-8">
<script src="https://npmcdn.com/react@15.2.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.2.1/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser-polyfill.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
<div id="app"></div>
<script type="text/babel">

var App = React.createClass({
  render() {
    return <table border="1">
      <tbody>
        <tr>
          <th colspan="2">people are...</th>
        </tr>
        <tr>
          <td>monkeys</td>
          <td>donkeys</td>
        </tr>
      </tbody>
    </table>
  }
})

ReactDOM.render(<App who="World"/>, document.querySelector('#app'))

</script>
Warning: Unknown DOM property colspan. Did you mean colSpan?
    in th (created by App)
    in tr (created by App)
    in tbody (created by App)
    in table (created by App)
    in App

avatar de usuario
Nathan Arturo

Además de cambiar el caso, también tuve que cambiar el valor de una cadena a un número.

En lugar de esto:

<td colspan='6' />

Tuve que hacer esto:

<td colSpan={6} />

avatar de usuario
priyanka sharma

colspan la propiedad está en camelCase como colSpan. Entonces, en lugar de colspan necesitamos usar colSpan.

En React v16.12 aún puede proporcionar el valor como intal igual que colSpan={4} o stringal igual que: colSpan="4".

  • Realmente no importa: los nombres de etiquetas HTML y los nombres de atributos no distinguen entre mayúsculas y minúsculas

    – fen1x

    23 de agosto de 2017 a las 7:43


  • @ fen1x React es mucho más estricto que el HTML estándar.

    – Nathan Arturo

    14/09/2017 a las 21:55

  • @ fen1x Sí importa reaccionar, he experimentado lo mismo en mi proyecto actual.

    –Priyanka Sharma

    18 de septiembre de 2017 a las 6:15


  • @ fen1x En realidad, no es HTML, se llama JSX, que es muy similar a HTML.

    – tatolina

    21/09/2021 a las 18:37

Tuve un caso un poco diferente, pero la solución final para mí fue darle al th/td una display: table-cell; propiedad.

Tuve que poner colSpan al final antes de cerrar la etiqueta de apertura por alguna razón, no estaba funcionando al principio como el primer apoyo.

¿Ha sido útil esta solución?