javascript - react - Cómo pasar props sin valor al componente.

react js tutorial español pdf

Question

¿Cómo se pasa una proposición sin valor a un componente de reacción?

<SomeComponent disableHeight> {/* here */}
    {({width}) => (
        <AnotherComponent
            autoHeight {/* and here */}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>

Nota: no hay valores prop propuestos para esos props.

Parece que no puedo encontrar referencias sobre eso, pero al observar los valores de esas propiedades, se asignan a true de forma predeterminada.

Answer 1

TL; DR: Establecer cadena vacía :

<Amp.AmpAccordion animate="">

Explicación

Una copia + pegar desde el enlace de arriba:

Cualquier atributo con una cadena vacía se representará en el DOM sin un valor.

Documentación relevante de W3C: https://www.w3.org/TR/html5/syntax.html#elements-attributes

Sintaxis de atributo vacío
Sólo el nombre del atributo. El valor es implícitamente la cadena vacía.

En el siguiente ejemplo, el atributo deshabilitado se da con la sintaxis de atributo vacía:

<input disabled>

Si un atributo que usa la sintaxis de atributo vacío va a ser seguido por otro atributo, entonces debe haber un carácter de espacio que los separe

Answer 2

Lo que está pasando es interpretado por el compilador como un atributo booleano. Esto también es válido para cuando se escribe HTML puro; Los atributos sin valores se interpretan como un true booleano. Dado que JSX es un azúcar sintáctico para escribir HTML, tiene sentido que tenga el mismo comportamiento.

La documentación oficial de React tiene lo siguiente:

Atributos booleanos

Esto ocurre a menudo cuando se utilizan elementos de formulario HTML, con atributos como deshabilitado, requerido, verificado y solo lectura. La omisión del valor de un atributo hace que JSX lo trate como verdadero. Para pasar falso se debe utilizar una expresión de atributo.

// Estos dos son equivalentes en JSX para deshabilitar un botón

<input type="button" disabled />;
<input type="button" disabled={true} />;

// Y estos dos son equivalentes en JSX para no deshabilitar un botón

<input type="button" />;
<input type="button" disabled={false} />;

Ejemplo

JSX:

<div>
  <Component autoHeight />
  <AnotherComponent autoHeight={null} />
</div>

JS:

React.createElement(
  "div",
  null,
  React.createElement(Component, { autoHeight: true }),
  React.createElement(AnotherComponent, { autoHeight: null })
);

Revisa la demo babel de esto, here .

Solución

Como ctrlplusb declaró, si desea pasar un "prop vacío", simplemente puede darle el valor de null .

Para que pudieras hacer:

<SomeComponent disableHeight={null}>
    {({width}) => (
        <AnotherComponent
            autoHeight={null}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>

Aunque this.props.autoHeight que esto es probablemente totalmente innecesario porque leer this.props.autoHeight desde AnotherComponent siempre te dará un null , sin importar si lo autoHeight={null} explícitamente como autoHeight={null} o no.

Answer 3

Sí, JSX ve las propiedades sin a = como un verdadero valor lógico.

Una opción es simplemente establecer valores nulos:

<Foo name="Bob" surname={null} />

También puede crear dinámicamente una bolsa de propiedades a través de un objeto y solo agregar las propiedades si es necesario. Por ejemplo:

render() {
  const propBag = {
    width: width,
    height: 300
  };
  if (someCondition) {
    propBag.something = ''bob'';
  }

  return (
    <FooComponent {...propBag} {..otherProps} />
  );
}