¿Cómo agrego condicionalmente atributos a los componentes de React?

630
Remi Sture 2015-07-02 04:07.

¿Hay alguna forma de agregar atributos solo a un componente de React si se cumple una determinada condición?

Se supone que debo agregar atributos required y readOnly para formar elementos basados ​​en una llamada Ajax después del render, pero no veo cómo resolver esto ya que readOnly = "false" no es lo mismo que omitir el atributo por completo.

El siguiente ejemplo debería explicar lo que quiero, pero no funcionará (Error de análisis: identificador inesperado).

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});

13 answers

595
juandemarco 2015-07-02 04:23.

Aparentemente, para ciertos atributos, React es lo suficientemente inteligente como para omitir el atributo si el valor que le pasa no es verdadero. Por ejemplo:

const InputComponent = function() {
    const required = true;
    const disabled = false;

    return (
        <input type="text" disabled={disabled} required={required} />
    );
}

resultará en:

<input type="text" required>

Actualización: si alguien tiene curiosidad sobre cómo / por qué sucede esto, puede encontrar detalles en el código fuente de ReactDOM, específicamente en las líneas 30 y 167 del archivo DOMProperty.js .

433
Brigand 2015-07-02 04:34.

¿Cómo agrego condicionalmente atributos a los componentes de React? suele ser correcta, pero aquí hay otra opción.

Construye un objeto como quieras:

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition)
  inputProps.disabled = true;

Renderizar con extensión, opcionalmente pasando también otros accesorios.

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />
342
Arman Yeghiazaryan 2016-02-16 23:17.

Aquí es un ejemplo del uso Bootstrap 's Buttona través de Reaccionar-Bootstrap (versión 0.32.4):

var condition = true;

return (
  <Button {...(condition ? {bsStyle: 'success'} : {})} />
);

Dependiendo de la condición, ya sea {bsStyle: 'success'}o {}será devuelto. El operador de propagación luego extenderá las propiedades del objeto devuelto al Buttoncomponente. En el caso falso, dado que no existen propiedades en el objeto devuelto, no se pasará nada al componente.


Una forma alternativa basada en ¿Cómo agrego condicionalmente atributos a los componentes de React? :

var condition = true;

return (
  <Button bsStyle={condition ? 'success' : undefined} />
);

La única pequeña diferencia es que en el segundo ejemplo que el componente interno <Button/>'s propsobjeto tendrá una clave bsStylecon un valor de undefined.

101
Season 2016-12-08 18:35.

Aquí tienes una alternativa.

var condition = true;

var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};

var component = <div { ...props } />;

O su versión en línea

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);
44
Tony Tai Nguyen 2018-02-16 11:05.

He aquí una forma de hacerlo.

Con un condicional :

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

Todavía prefiero usar la forma habitual de pasar los accesorios, porque es más legible (en mi opinión) en el caso de que no tenga ningún condicional.

Sin condicional :

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />
26
Mina Luke 2017-09-02 20:02.

Digamos que queremos agregar una propiedad personalizada (usando aria- * o data- *) si una condición es verdadera:

{...this.props.isTrue && {'aria-name' : 'something here'}}

Digamos que queremos agregar una propiedad de estilo si una condición es verdadera:

{...this.props.isTrue && {style : {color: 'red'}}}
20
GijsjanB 2016-10-25 04:49.

Puede usar el mismo atajo, que se usa para agregar / eliminar (partes de) componentes ( {isVisible && <SomeComponent />}).

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}
11
snyh 2017-10-22 19:04.

Si usa ECMAScript 6, simplemente puede escribir así.

// First, create a wrap object.
const wrap = {
    [variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />
8
Michael Parker 2015-07-02 04:18.

Esto debería funcionar, ya que su estado cambiará después de la llamada Ajax y el componente principal se volverá a renderizar.

render : function () {
    var item;
    if (this.state.isRequired) {
        item = <MyOwnInput attribute={'whatever'} />
    } else {
        item = <MyOwnInput />
    }
    return (
        <div>
            {item}
        </div>
    );
}
3
Juraj 2018-01-19 08:45.

En React puedes renderizar componentes de forma condicional, pero también sus atributos, como props, className, id y más.

En React, es una muy buena práctica usar el operador ternario que puede ayudarlo a renderizar componentes de forma condicional.

Un ejemplo también muestra cómo renderizar condicionalmente Component y su atributo de estilo.

Aquí hay un ejemplo simple:

class App extends React.Component {
  state = {
    isTrue: true
  };

  render() {
    return (
      <div>
        {this.state.isTrue ? (
          <button style={{ color: this.state.isTrue ? "red" : "blue" }}>
            I am rendered if TRUE
          </button>
        ) : (
          <button>I am rendered if FALSE</button>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

1
Jonas Sciangula Street 2020-08-13 05:30.

Por ejemplo, usando estilos de propiedad para contenedores personalizados

const DriverSelector = props => {
  const Container = props.container;
  const otherProps = {
    ...( props.containerStyles && { style: props.containerStyles } )
  };

  return (
    <Container {...otherProps} >
0
Viktor Kireev 2015-07-02 04:24.

Teniendo en cuenta la publicación JSX In Depth , puede resolver su problema de esta manera:

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);
0
lifeisfoo 2020-11-23 13:37.

Desde mi punto de vista, la mejor manera de administrar múltiples accesorios condicionales es el enfoque de objetos de accesorios de @brigand. Pero se puede mejorar para evitar agregar un ifbloque por cada accesorio condicional.

El ayudante de ifVal

renómbrelo como desee (iv, condVal, cv, _, ...)

Puede definir una función auxiliar para devolver un valor u otro, si se cumple una condición:

// components-helpers.js
export const ifVal = (cond, trueValue=true, falseValue=null) => {
  return cond ? trueValue : falseValue
}

Si condes true(o veraz ), trueValuese devuelve - o true. Si condes false(o falso ), falseValuese devuelve - o null.

Estos valores predeterminados ( truey null) son, por lo general, los valores correctos para permitir que una propiedad se pase o no a un componente React. Puede pensar en esta función como un "operador ternario de React mejorado". Mejorelo si necesita más control sobre los valores devueltos.

Usémoslo con muchos accesorios.

Construye el objeto de utilería (complejo)

// your-code.js
import { ifVal } from './components-helpers.js'

// BE SURE to replace all true/false with a real condition in you code
// this is just an example

const inputProps = {
  value: 'foo',
  enabled: ifVal(true), // true
  noProp: ifVal(false), // null - ignored by React
  aProp: ifVal(true, 'my value'), // 'my value'
  bProp: ifVal(false, 'the true text', 'the false text') // 'my false value',
  onAction: ifVal(isGuest, handleGuest, handleUser) // it depends on isGuest value
};

 <MyComponent {...inputProps} />

Este enfoque es algo similar a la forma popular de administrar clases de forma condicional utilizando la utilidad de nombres de clases , pero adaptado a los accesorios.

Por qué debería utilizar este enfoque

Tendrás una sintaxis limpia y legible, incluso con muchos accesorios condicionales: cada nuevo accesorio solo agrega una línea de código dentro de la declaración del objeto.

De esta manera se sustituye el ruido de la sintaxis de los operadores repetidas ( ..., &&, ? :, ...), que puede ser muy molesto cuando tiene muchos apoyos, con una llamada a la función normal.

Nuestra principal prioridad, como desarrolladores, es escribir el código más obvio que resuelva un problema. Demasiadas veces resolvemos problemas para nuestro ego , agregando complejidad donde no es necesario. Nuestro código debería ser sencillo, para nosotros hoy, para nosotros mañana y para nuestros compañeros.

solo porque podamos hacer algo no significa que debamos

Espero que esta respuesta tardía ayude.

Related questions

MORE COOL STUFF

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que le diagnosticaron envenenamiento por mercurio y plomo, probablemente debido a su trabajo como manipuladora de casas.

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

Recientemente salió a la luz un informe policial que acusa a la estrella de 'Love Is Blind', Brennon, de violencia doméstica. Ahora, Brennon ha respondido a los reclamos.

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Conozca cómo Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia mientras organizaba la primera celebración de Acción de Gracias desde que murió su madre, Naomi Judd.

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Descubra por qué un destacado experto en lenguaje corporal cree que es fácil trazar "tales paralelismos" entre la princesa Kate Middleton y la princesa Diana.

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

Los inodoros arrojan columnas de aerosol invisibles con cada descarga. ¿Como sabemos? La prueba fue capturada por láseres de alta potencia.

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

¿Caduca el repelente de insectos?

¿Caduca el repelente de insectos?

¿Sigue siendo efectivo ese lote de repelente de insectos que te quedó del verano pasado? Si es así, ¿por cuánto tiempo?

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Tapas elásticas de silicona de Tomorrow's Kitchen, paquete de 12 | $14 | Amazonas | Código promocional 20OFFKINJALids son básicamente los calcetines de la cocina; siempre perdiéndose, dejando contenedores huérfanos que nunca podrán volver a cerrarse. Pero, ¿y si sus tapas pudieran estirarse y adaptarse a todos los recipientes, ollas, sartenes e incluso frutas en rodajas grandes que sobran? Nunca más tendrás que preocuparte por perder esa tapa tan específica.

Cuéntanos tus mejores trucos de Washington, DC

Cuéntanos tus mejores trucos de Washington, DC

Hemos pirateado algunas ciudades industriales en esta columna, como Los Ángeles y Las Vegas. Ahora es el momento de una ciudad militar-industrial-compleja.

Un minorista está eliminando su sección de tallas grandes y mezclando tallas más grandes con todo lo demás

Un minorista está eliminando su sección de tallas grandes y mezclando tallas más grandes con todo lo demás

Un minorista está enlatando su sección de tallas grandes. Pero no están tomando la categoría solo en línea o descontinuándola por completo.

La mejor forma de guardar animales de peluche es dentro de un puf

La mejor forma de guardar animales de peluche es dentro de un puf

Entiendo totalmente, completamente si tienes una relación difícil con los animales de peluche. Son lindos, tienen valor sentimental y es difícil separarse de ellos.

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

El equipo está a la espera de las medallas que ganó en los Juegos Olímpicos de Invierno de 2022 en Beijing, ya que se está resolviendo un caso de dopaje que involucra a la patinadora artística rusa Kamila Valieva.

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Miles de compradores de Amazon recomiendan la funda de almohada de seda Mulberry, y está a la venta en este momento. La funda de almohada de seda viene en varios colores y ayuda a mantener el cabello suave y la piel clara. Compre las fundas de almohada de seda mientras tienen hasta un 46 por ciento de descuento en Amazon

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

El jueves se presentó una denuncia de delito menor amenazante agravado contra Joe Mixon.

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

El Departamento de Policía de Lafayette comenzó a investigar a un profesor de la Universidad de Purdue en diciembre después de recibir varias denuncias de un "hombre sospechoso que se acercaba a una mujer".

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Al igual que el mundo que nos rodea, el lenguaje siempre está cambiando. Mientras que en eras anteriores los cambios en el idioma ocurrían durante años o incluso décadas, ahora pueden ocurrir en cuestión de días o incluso horas.

India me está pateando el culo

India me está pateando el culo

Estoy de vuelta por primera vez en seis años. No puedo decirte cuánto tiempo he estado esperando esto.

ℝ

“And a river went out of Eden to water the garden, and from thence it was parted and became into four heads” Genesis 2:10. ? The heart is located in the middle of the thoracic cavity, pointing eastward.

¿Merrick Garland le ha fallado a Estados Unidos?

Es más de la mitad de la presidencia de Biden. ¿Qué está esperando Merrick Garland?

¿Merrick Garland le ha fallado a Estados Unidos?

Creo, un poco tarde en la vida, en dar oportunidades a la gente. Generosamente.

Language