¿Cuál es el más apropiado para usar en React y por qué?
* NB: los ejemplos están en React jsx-syntax;
<div style={ condition ? {backgroundColor:'#d6f9dd'} : {} }> <div style={ condition ? {backgroundColor:'#d6f9dd'} : undefined }> <div style={ condition ? {backgroundColor:'#d6f9dd'} : null }> <div style={ condition ? {backgroundColor:'#d6f9dd'} : 'inherit' }> <div style={ condition ? {backgroundColor:'#d6f9dd'} : 'none' }>Personalmente, solo uso la propiedad de estilo si necesito sobrescribir un atributo css que se adjuntó a una biblioteca separada.
De las opciones que proporcionaste, las únicas que son válidas son las siguientes:
<div style={ condition ? {backgroundColor:'#d6f9dd'} : {} } /> <div style={ condition ? {backgroundColor:'#d6f9dd'} : undefined } />React espera que la propiedad de estilo sea indefinida o un objeto.
Además de eso, aplicaría condicionalmente las propias propiedades css en lugar de todo el objeto de estilo.
Al igual que:
<div style={{ backgroundColor: condition ? '#d6f9dd' : undefined }} />De esa manera, si necesito aplicar varias propiedades de estilo pero una de ellas depende de la condición, la otra aún se puede aplicar incluso cuando la condición no es verdadera. Establecer una propiedad en indefinida es similar a no haberla incluido nunca en el objeto de estilo.
No uses objetos vacíos. Pueden devolver la verdad, además de tener propiedades.
console.log(typeof {}.hasOwnProperty); // functionEsto podría causar problemas en el futuro. La mejor opción es usar undefined si desea un estilo en línea imo