javascript - validar - tomar valores ajax

¿Cómo tener elementos condicionales y mantener SECO con JSX de Facebook React?

Question

¿Cómo puedo incluir opcionalmente un elemento en JSX? Este es un ejemplo que utiliza un banner que debería estar en el componente si se ha pasado. Lo que quiero evitar es tener que duplicar las etiquetas HTML en la declaración if.

render: function () {
    var banner;
    if (this.state.banner) {
        banner = <div id="banner">{this.state.banner}</div>;
    } else {
        banner = ?????
    }
    return (
        <div id="page">
            {banner}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Answer 1

&& + código-estilo + pequeños componentes

Esta simple prueba de sintaxis + código de convención + componentes pequeños enfocados es para mí la opción más legible que existe. Solo debe tener especial cuidado con los valores false como false , 0 o "" .

render: function() {
    var person= ...; 
    var counter= ...; 
    return (
       <div className="component">
          {person && (
            <Person person={person}/>
          )}
          {(typeof counter !== ''undefined'') && (
            <Counter value={counter}/>
          )}
       </div>
    );
}

hacer notación

La sintaxis de notación de ES7 stage-0 también es muy buena y la usaré definitivamente cuando mi IDE la admita correctamente:

const Users = ({users}) => (
  <div>
    {users.map(user =>
      <User key={user.id} user={user}/>
    )}
  </div>
)  

const UserList = ({users}) => do {
  if (!users) <div>Loading</div>
  else if (!users.length) <div>Empty</div>
  else <Users users={users}/>
}

Más detalles aquí: ReactJs - Crear un componente "If" ... ¿una buena idea?

Answer 2

¿Qué pasa con esto? Vamos a definir un simple componente de ayuda.

var If = React.createClass({
    render: function() {
        if (this.props.test) {
            return this.props.children;
        }
        else {
            return false;
        }
    }
});

Y úsalo de esta manera:

render: function () {
    return (
        <div id="page">
            <If test={this.state.banner}>
                <div id="banner">{this.state.banner}</div>
            </If>
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

ACTUALIZACIÓN: como mi respuesta se está volviendo popular, me siento obligado a advertirle sobre el mayor peligro relacionado con esta solución. Como se señaló en otra respuesta, el código dentro del componente <If /> se ejecuta siempre independientemente de si la condición es verdadera o falsa. Por lo tanto, el siguiente example fallará en caso de que el banner sea null (observe el acceso de la propiedad en la segunda línea):

<If test={this.state.banner}>
    <div id="banner">{this.state.banner.url}</div>
</If>

Tienes que tener cuidado cuando lo uses. Sugiero leer otras respuestas para enfoques alternativos (más seguros).

ACTUALIZACIÓN 2: Mirando hacia atrás, este enfoque no solo es peligroso sino también desesperadamente engorroso. Es un ejemplo típico de cuando un desarrollador (yo) intenta transferir patrones y enfoques que conoce de un área a otra, pero realmente no funciona (en este caso, otros idiomas de plantilla).

Si necesitas un elemento condicional, hazlo así:

render: function () {
    return (
        <div id="page">
            {this.state.banner &&
                <div id="banner">{this.state.banner}</div>}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Si también necesita la rama else, solo use un operador ternario:

{this.state.banner ?
   <div id="banner">{this.state.banner}</div> :
   <div>There is no banner!</div>
}

Es mucho más corto, más elegante y seguro. Lo uso todo el tiempo. La única desventaja es que no puede hacer else if ramifica tan fácilmente, pero eso no suele ser tan común.

De todos modos, esto es posible gracias a cómo funcionan los operadores lógicos en JavaScript. Los operadores lógicos incluso permiten pequeños trucos como este:

<h3>{this.state.banner.title || ''Default banner title''}</h3>

Answer 3

Aquí está mi enfoque utilizando ES6.

import React, { Component } from ''react'';
// you should use ReactDOM.render instad of React.renderComponent
import ReactDOM from ''react-dom'';

class ToggleBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // toggle box is closed initially
      opened: false,
    };
    // http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
    this.toggleBox = this.toggleBox.bind(this);
  }

  toggleBox() {
    // check if box is currently opened
    const { opened } = this.state;
    this.setState({
      // toggle value of `opened`
      opened: !opened,
    });
  }

  render() {
    const { title, children } = this.props;
    const { opened } = this.state;
    return (
      <div className="box">
        <div className="boxTitle" onClick={this.toggleBox}>
          {title}
        </div>
        {opened && children && (
          <div class="boxContent">
            {children}
          </div>
        )}
      </div>
    );
  }
}

ReactDOM.render((
  <ToggleBox title="Click me">
    <div>Some content</div>
  </ToggleBox>
), document.getElementById(''app''));

Demostración: http://jsfiddle.net/kb3gN/16688/

Estoy usando código como:

{opened && <SomeElement />}

Eso hará que SomeElement solo si está opened es verdadero. Funciona debido a la forma en que JavaScript resuelve las condiciones lógicas:

true && true && 2; // will output 2
true && false && 2; // will output false
true && ''some string''; // will output ''some string''
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise

Como React ignorará el false , me parece una buena forma de renderizar condicionalmente algunos elementos.

Answer 4

Como ya se mencionó en las respuestas, JSX le presenta dos opciones

• Operador ternario

  { this.state.price ? <div>{this.state.price}</div> : null }

• Conjuncion logica

  { this.state.price && <div>{this.state.price}</div> }

Sin embargo, esos no funcionan por price == 0 .

JSX representará la rama falsa en el primer caso y en el caso de una conjunción lógica, no se representará nada. Si la propiedad puede ser 0, solo use declaraciones if fuera de su JSX.

Answer 5

Con ES6 puedes hacerlo con un sencillo de una sola línea.

const If = ({children, show}) => show ? children : null

"show" es un booleano y usas esta clase por

<If show={true}> Will show </If>
<If show={false}> WON''T show </div> </If>

Answer 6

Cuando tener que procesar solo algo si la condición pasada está completa, puede usar la sintaxis:

{ condition && what_to_render }

El código de esta manera se vería así:

render() {
    const { banner } = this.state;
    return (
        <div id="page">
            { banner && <div id="banner">{banner}</div> }
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Hay, por supuesto, otras formas válidas de hacer esto, todo depende de las preferencias y la ocasión. ¡Puede obtener más información sobre cómo realizar la representación condicional en React en este artículo si está interesado!

Answer 7

El componente de estilo If es peligroso porque el bloque de código siempre se ejecuta independientemente de la condición. Por ejemplo, esto causaría una excepción nula si el banner es null :

//dangerous
render: function () {
  return (
    <div id="page">
      <If test={this.state.banner}>
        <img src={this.state.banner.src} />
      </If>
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

Otra opción es usar una función en línea (especialmente útil con las instrucciones else):

render: function () {
  return (
    <div id="page">
      {function(){
        if (this.state.banner) {
          return <div id="banner">{this.state.banner}</div>
        }
      }.call(this)}
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

Otra opción de los github.com/facebook/react/issues/690 reacción:

render: function () {
  return (
    <div id="page">
      { this.state.banner &&
        <div id="banner">{this.state.banner}</div>
      }
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

Answer 8

Este componente funciona cuando tienes más de un elemento dentro de la rama "if":

    var Display = React.createClass({
        render: function() {
            if (!this.props.when) {
                return false;
            }
            return React.DOM.div(null, this.props.children);
        }
    });

Uso:

      render: function() {
            return (
                <div>
                    <Display when={this.state.loading}>
                        Loading something...
                        <div>Elem1</div>
                        <div>Elem2</div>
                    </Display>
                    <Display when={!this.state.loading}>
                        Loaded
                        <div>Elem3</div>
                        <div>Elem4</div>
                    </Display>
                </div>
            );
        },

Ps alguien piensa que estos componentes no son buenos para la lectura de código. Pero en mi mente html con javascript es peor

Answer 9

Hay otra solución, si componente para React :

var Node = require(''react-if-comp'');
...
render: function() {
    return (
        <div id="page">
            <Node if={this.state.banner}
                  then={<div id="banner">{this.state.banner}</div>} />
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Answer 10

Hice https://github.com/ajwhite/render-if recientemente para renderizar elementos de forma segura solo si el predicado pasa .

{renderIf(1 + 1 === 2)(
  <span>Hello!</span>
)}

o

const ifUniverseIsWorking = renderIf(1 + 1 === 2);

//...

{ifUniverseIsWorking(
  <span>Hello!</span>
)}

Answer 11

Hice npmjs.com/package/jsx-control-statements para hacerlo un poco más fácil, básicamente, le permite definir <If> condicionales como etiquetas y luego compilarlas en ifs ternarias para que el código en el interior el <If> solo se ejecuta si la condición es verdadera.

Answer 12

La mayoría de los ejemplos están con una línea de "html" que se procesa condicionalmente. Esto me parece legible cuando tengo varias líneas que deben procesarse condicionalmente.

render: function() {
  // This will be renered only if showContent prop is true
  var content = 
    <div>
      <p>something here</p>
      <p>more here</p>
      <p>and more here</p>
    </div>;

  return (
    <div>
      <h1>Some title</h1>

      {this.props.showContent ? content : null}
    </div>
  );
}

El primer ejemplo es bueno porque en lugar de null podemos generar condicionalmente otro contenido como {this.props.showContent ? content : otherContent} {this.props.showContent ? content : otherContent}

Pero si solo necesita mostrar / ocultar contenido, esto es incluso mejor, ya que los valores booleanos, nulos y no definidos se ignoran.

render: function() {
  return (
    <div>
      <h1>Some title</h1>

      // This will be renered only if showContent prop is true
      {this.props.showContent &&
        <div>
          <p>something here</p>
          <p>more here</p>
          <p>and more here</p>
        </div>
      }
    </div>
  );
}

Answer 13

La sintaxis experimental de ES7 hace esto fácil. Si está utilizando Babel, habilite la función es7.doExpressions luego:

render() {
  return (
    <div id="banner">
      {do {
        if (this.state.banner) {
          this.state.banner;
        } else {
          "Something else";
        }
      }}
    </div>
  );
}

Ver http://wiki.ecmascript.org/doku.php?id=strawman:do_expressions

Answer 14

Me gusta la IIFE explícita de las Expresiones de función invocadas de inmediato ( IIFE ) y if-else sobre las render callbacks y los ternary operators .

render() {
  return (
    <div id="page">
      {(() => (
        const { banner } = this.state;
        if (banner) {
          return (
            <div id="banner">{banner}</div>
          );
        }
        // Default
        return (
          <div>???</div>
        );
      ))()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

Solo necesita familiarizarse con la sintaxis IIFE , {expression} es la sintaxis React habitual, dentro de ella solo considere que está escribiendo una función que se está invocando a sí misma.

function() {

}()

que necesitan ser envueltos dentro de parens

(function() {

}())

Answer 15

No creo que esto haya sido mencionado. Esto es como tu propia respuesta, pero creo que es aún más simple. Siempre puede devolver cadenas desde las expresiones y puede anidar jsx dentro de las expresiones, por lo que esto permite una expresión en línea fácil de leer.

render: function () {
    return (
        <div id="page">
            {this.state.banner ? <div id="banner">{this.state.banner}</div> : ''''}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpf1/t39.3284-6/10574688_1565081647062540_1607884640_n.js"></script>
<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpa1/t39.3284-6/10541015_309770302547476_509859315_n.js"></script>
<script type="text/jsx;harmony=true">void function() { "use strict";

var Hello = React.createClass({
  render: function() {
    return (
      <div id="page">
        {this.props.banner ? <div id="banner">{this.props.banner}</div> : ''''}
        <div id="other-content">
          blah blah blah...
        </div>
      </div>
    );   
  }
});

var element = <div><Hello /><Hello banner="banner"/></div>;
React.render(element, document.body);

}()</script>

Answer 16

Personalmente, realmente creo que las expresiones ternarias que se muestran en http://facebook.github.io/react/tips/if-else-in-JSX.html son la forma más natural que cumple con los estándares de ReactJs.

Vea el siguiente ejemplo. Es un poco desordenado a primera vista pero funciona bastante bien.

<div id="page">
  {this.state.banner ? (
    <div id="banner">
     <div class="another-div">
       {this.state.banner}
     </div>
    </div>
  ) : 
  null} 
  <div id="other-content">
    blah blah blah...
  </div>
</div>

Answer 17

Puede incluir condicionalmente elementos utilizando el operador ternario de la siguiente manera:

render: function(){

         return <div id="page">

                  //conditional statement
                  {this.state.banner ? <div id="banner">{this.state.banner}</div> : null}

                  <div id="other-content">
                      blah blah blah...
                  </div>

               </div>
}

Answer 18

Puede usar una función y devolver el componente y mantener delgada la función de renderizado

class App extends React.Component {
  constructor (props) {
    super(props);
    this._renderAppBar = this._renderAppBar.bind(this);
  }

  render () {
    return <div>
      {_renderAppBar()}

      <div>Content</div>

    </div>
  }

  _renderAppBar () {
    if (this.state.renderAppBar) {
      return <AppBar />
    }
  }
}

Answer 19

Simple, crea una función.

renderBanner: function() {
  if (!this.state.banner) return;
  return (
    <div id="banner">{this.state.banner}</div>
  );
},

render: function () {
  return (
    <div id="page">
      {this.renderBanner()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

Este es un patrón que personalmente sigo todo el tiempo. Hace que el código sea realmente limpio y fácil de entender. Además, le permite refactorizar Banner en su propio componente si es demasiado grande (o reutilizado en otros lugares).

Answer 20

Solo deja el banner como no definido y no se incluye.

Answer 21

Solo para agregar otra opción, si le gusta / tolera coffee-script, puede usar coffee-reaccion para escribir su JSX, en cuyo caso si / else se pueden usar ya que son expresiones en coffee-script y no sentencias

render: ->
  <div className="container">
    {
      if something
        <h2>Coffeescript is magic!</h2>
      else
        <h2>Coffeescript sucks!</h2>
    }
  </div>  

Answer 22

Solo para extender la respuesta de @Jack Allan con referencias a documentos.

La documentación de React Basic (Inicio rápido) sugiere null en tal caso. Sin embargo, los valores booleanos, nulos e indefinidos también se ignoran, como se menciona en la guía avanzada.

Answer 23

Tal vez ayude a alguien que se encuentre con la pregunta: robinwieruch.de/conditional-rendering-react Es un artículo sobre todas las diferentes opciones para la representación condicional en React.

Puntos clave de cuándo usar qué representación condicional:

** si-si no

• Es la representación condicional más básica.
• amigable para principiantes
• use si desea optar por salir anticipadamente de un método de representación devolviendo nulo

** operador ternario

• usarlo sobre una sentencia if-else
• es más conciso que if-else

** operador lógico &&

• Utilícelo cuando un lado de la operación ternaria devuelva nulo.

** cambiar la caja

• verboso
• Solo se puede alinear con la función autoinvocación.
• Evítalo, usa enumeraciones

** enumeraciones

• perfecto para mapear diferentes estados
• perfecto para mapear más de una condición

** Representaciones condicionales multinivel / anidadas

• Evítalos por razones de legibilidad.
• divida los componentes en componentes más livianos con su propia representación condicional simple
• usar HOCs

** HOCs

• Úsalos para proteger la representación condicional.
• Los componentes pueden centrarse en su propósito principal.

** componentes externos de plantillas

• Evítalos y siéntete cómodo con JSX y JavaScript.

Answer 24

También hay una técnica que utiliza elementos de representación para generar un componente condicional. El beneficio es que el renderizado no se evaluaría hasta que se cumpla la condición, lo que no genera preocupaciones para los valores nulos e indefinidos .

const Conditional = ({ condition, render }) => {
  if (condition) {
    return render();
  }
  return null;
};

class App extends React.Component {
  constructor() {
    super();
    this.state = { items: null }
  }

  componentWillMount() {
    setTimeout(() => { this.setState({ items: [1,2] }) }, 2000);
  }

  render() {
    return (
      <Conditional
        condition={!!this.state.items}
        render={() => (
          <div>
            {this.state.items.map(value => <p>{value}</p>)}
          </div>
        )}
      />
    )
  }
}

Answer 25

También hay una versión de una línea realmente limpia ... {this.props.product.title || "Sin título" }

Es decir:

render: function() {
            return (
                <div className="title">
                    { this.props.product.title || "No Title" }
                </div>
            );
        }

Answer 26

También puedes escribirlo como

{ this.state.banner && <div>{...}</div> }

Si su state.banner es null o undefined , se omite el lado derecho de la condición.

Answer 27

Utilizo un método abreviado más explícito: una expresión de función invocada inmediatamente (IIFE):

{(() => {
  if (isEmpty(routine.queries)) {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  } else if (this.state.configured) {
    return <DeviceList devices={devices} routine={routine} configure={() => this.setState({configured: false})}/>
  } else {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  }
})()}