diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 5d5c829f3..0c9e073e7 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -1,6 +1,6 @@ --- id: conditional-rendering -title: Conditional Rendering +title: Renderizado condicional permalink: docs/conditional-rendering.html prev: handling-events.html next: lists-and-keys.html @@ -8,11 +8,11 @@ redirect_from: - "tips/false-in-jsx.html" --- -In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. +En React, puedes crear distintos componentes que encapsulan el comportamiento que necesitas. Entonces, puedes renderizar solamente algunos de ellos, dependiendo del estado de tu aplicación. -Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them. +El renderizado condicional en React funciona de la misma forma que lo hacen las condiciones en JavaScript. Usa operadores de JavaScript como [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) o el [operador condicional](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator) para crear elementos representando el estado actual, y deja que React actualice la UI para emparejarlos. -Consider these two components: +Considera estos dos componentes: ```js function UserGreeting(props) { @@ -24,7 +24,7 @@ function GuestGreeting(props) { } ``` -We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in: +Vamos a crear un componente `Greeting` que muestra cualquiera de estos componentes dependiendo si el usuario ha iniciado sesión: ```javascript{3-7,11,12} function Greeting(props) { @@ -36,21 +36,21 @@ function Greeting(props) { } ReactDOM.render( - // Try changing to isLoggedIn={true}: + // Intentar cambiando isLoggedIn={true}: , document.getElementById('root') ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) +[**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -This example renders a different greeting depending on the value of `isLoggedIn` prop. +Este ejemplo renderiza un saludo diferente según el valor de la prop `isLoggedIn`. -### Element Variables +### Variables de elementos -You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change. +Puedes usar variables para almacenar elementos. Esto puede ayudarte para renderizar condicionalmente una parte del componente mientras el resto del resultado no cambia. -Consider these two new components representing Logout and Login buttons: +Considera estos dos componentes nuevos que representan botones de cierre e inicio de sesión: ```js function LoginButton(props) { @@ -70,9 +70,9 @@ function LogoutButton(props) { } ``` -In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`. +En el siguiente ejemplo, crearemos un [componente con estado](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) llamado `LoginControl`. -It will render either `` or `` depending on its current state. It will also render a `` from the previous example: +El componente va a renderizar `` o `` dependiendo de su estado actual. También va a renderizar un `` del ejemplo anterior: ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -82,25 +82,20 @@ class LoginControl extends React.Component { this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = {isLoggedIn: false}; } - handleLoginClick() { this.setState({isLoggedIn: true}); } - handleLogoutClick() { this.setState({isLoggedIn: false}); } - render() { const isLoggedIn = this.state.isLoggedIn; let button; - if (isLoggedIn) { button = ; } else { button = ; } - return (
@@ -116,13 +111,13 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) +[**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below. +Si bien declarar una variable y usar una sentencia `if` es una buena forma de renderizar condicionalmente un componente, a veces podrías querer usar una sintaxis más corta. Hay algunas formas de hacer condiciones en una línea en JSX, explicadas a continuación. -### Inline If with Logical && Operator +### If en una línea con operador lógico && -You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element: +Puedes [embeber cualquier expresión en JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) envolviéndola en llaves. Esto incluye al operador lógico `&&` de JavaScript. Puede ser útil para incluir condicionalmente un elemento: ```js{6-10} function Mailbox(props) { @@ -146,17 +141,17 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) +[**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) -It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`. +Esto funciona porque en JavaScript, `true && expresión` siempre evalúa a `expresión`, y `false && expresión` siempre evalúa a `false`. -Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it. +Por eso, si la condición es `true`, el elemento justo después de `&&` aparecerá en el resultado. Si es `false`, React lo ignorará. -### Inline If-Else with Conditional Operator +### If-Else en una línea con operador condicional -Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). +Otro método para el renderizado condicional de elementos en una línea es usar el operador condicional [`condición ? true : false`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator) de JavaScript. -In the example below, we use it to conditionally render a small block of text. +En el siguiente ejemplo, lo usaremos para renderizar de forma condicional un pequeño bloque de texto. ```javascript{5} render() { @@ -169,7 +164,7 @@ render() { } ``` -It can also be used for larger expressions although it is less obvious what's going on: +También puede usarse para expresiones más grandes, aunque es menos obvio lo que está pasando: ```js{5,7,9} render() { @@ -179,27 +174,26 @@ render() { {isLoggedIn ? ( ) : ( - + )}
); } ``` -Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components). +Al igual que en JavaScript, depende de ti elegir un estilo apropiado en base a lo que tu y tu equipo consideran más legible. Recuerda también que cuando las condiciones se vuelven demasiado complejas, puede ser un buen momento para [extraer un componente](/docs/components-and-props.html#extracting-components). -### Preventing Component from Rendering +### Evitar que el componente se renderice -In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output. +En casos excepcionales, es posible que desees que un componente se oculte a sí mismo aunque haya sido renderizado por otro componente. Para hacer esto, devuelve `null` en lugar del resultado de renderizado. -In the example below, the `` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render: +En el siguiente ejemplo, el `` se renderiza dependiendo del valor de la prop llamada `warn`. Si el valor de la prop es `false`, entonces el componente no se renderiza: ```javascript{2-4,29} function WarningBanner(props) { if (!props.warn) { return null; } - return (
Warning! @@ -213,13 +207,11 @@ class Page extends React.Component { this.state = {showWarning: true}; this.handleToggleClick = this.handleToggleClick.bind(this); } - handleToggleClick() { this.setState(state => ({ showWarning: !state.showWarning })); } - render() { return (
@@ -238,6 +230,8 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) +[**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) + +El devolver `null` desde el método `render` de un componente no influye en la activación de los métodos del ciclo de vida del componente. Por ejemplo `componentDidUpdate` seguirá siendo llamado. + -Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance `componentDidUpdate` will still be called.