reactjs - example - react without jsx

¿Qué significa... descansar en React JSX?

Question

Mirando este ejemplo de React Router Dom v4 https://reacttraining.com/react-router/web/example/auth-workflow veo que el componente PrivateRoute destruye un prop resto como este

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: ''/login'',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

Quiero estar seguro de que { component: Component, ...rest } significa:

Desde los props , obtenga el prop Componente y luego todos los demás apoyos que le entreguen, y cambie el nombre de los props para que puedan evitar los problemas de nombres con los apoyos pasados ​​a la función de render Ruta.

Estoy en lo cierto

Answer 1

Lo siento, me di cuenta de que mi primera respuesta (aunque espero que todavía proporcione un contexto útil / adicional) no responde a su pregunta. Déjame intentar de nuevo.

Usted pregunta:

Quiero estar seguro de que { component: Component, ...rest } significa:

Desde los props , obtenga el prop Component y luego todos los demás props le props , y cambie el nombre de los props para que puedan evitar los problemas de nombres con los props pasados ​​a la función de render Ruta.

Tu interpretación no es del todo correcta. Sin embargo, según sus pensamientos, parece que al menos es consciente de que lo que está sucediendo aquí equivale a algún tipo de desestructuración de objetos (consulte la segunda respuesta y los comentarios para obtener más información).

Para dar una explicación precisa, dividamos la expresión { component: Component, ...rest } en dos operaciones separadas:

1. Operación 1: Encuentre la propiedad del component definida en props ( Nota : omega en minúscula) y asígnele una nueva ubicación en el estado que llamamos Component ( Nota : omega en mayúscula).
2. Operación 2: Luego, tome todas las propiedades restantes definidas en el objeto props y recójalas dentro de un argumento llamado rest .

El punto importante es que NO estás cambiando el nombre de props para rest . (Y tampoco tiene que ver con tratar de "evitar los problemas de nombres con los props pasados ​​a la función de render Ruta").

rest === props;
// => false

Simplemente está retirando el resto (de ahí la razón por la que se denomina al argumento) de las propiedades definidas en su objeto de props en un nuevo argumento llamado rest .

Ejemplo de uso

Aquí hay un ejemplo. Supongamos que tenemos un objeto myObj definido de la siguiente manera:

const myObj = {
  name: ''John Doe'',
  age: 35,
  sex: ''M'',
  dob: new Date(1990, 1, 1)
};

Para este ejemplo, puede ser útil pensar que los props tienen la misma estructura ( es decir , propiedades y valores) como se muestra en myObj . Ahora, vamos a escribir la siguiente tarea.

const { name: Username, ...rest } = myObj

La declaración anterior equivale tanto a la declaración como a la asignación de dos variables (o, supongo, constantes). La afirmación puede ser pensada como:

Tome el name propiedad definido en myObj y asigne su valor a una nueva variable que llamamos Username . Luego, tome cualquier otra propiedad que se haya definido en myObj ( es decir , age , sex y dob ) y recójalos en un nuevo objeto asignado a la variable que denominamos rest .

El registro de nombre de Username y rest en la console lo confirmaría. Tenemos los siguientes:

console.log(Username);
// => John Doe

console.log(rest);
// => { age: 35, sex: ''M'', dob: Mon Jan 01 1990 00:00:00 GMT-0800 (PST) }

Nota al margen

Usted puede preguntarse:

¿Por qué pasar por la molestia de quitar la propiedad del component solo para cambiarle el nombre Component con una letra mayúscula "C"?

Sí, parece bastante trivial. Y, si bien es una práctica estándar de React, hay una razón por la que toda la documentación de Facebook en su marco está escrita como tal. Es decir, capitalizar los componentes personalizados representados con JSX es menos una práctica en sí misma de lo que es una necesidad. Reaccionar, o más adecuadamente, JSX distingue entre mayúsculas y minúsculas . Los componentes personalizados insertados sin una primera letra en mayúscula no se representan en el DOM. Así es como React se ha definido para identificar componentes personalizados. Por lo tanto, si el ejemplo no hubiera cambiado el nombre de la propiedad de component que se eliminó de props a Component , la expresión <component {...props} /> no se procesaría correctamente.

Answer 2

Te permite "difundir" todos tus props en una sola expresión concisa. Por ejemplo, supongamos que los props recibidos por su componente PrivateRoute parecen

// `props` Object:
{
  thing1: ''Something'',
  thing2: ''Something else''
}

Si desea thing1 más estos elementos ( es decir , thing1 y thing2 ) a la etiqueta anidada <Component /> y no estaba familiarizado con la sintaxis de la propagación del objeto , puede escribir:

<Component
  thing1={ props.thing1 }
  thing2={ props.thing2 } />

Sin embargo, la sintaxis de { ...props } obvia tal verbosidad al permitirle difundir su objeto de props de la misma manera en que se puede propagar una matriz de valores ( por ejemplo , [...vals] ). En otras palabras, la expresión JSX a continuación y la anterior son exactamente equivalentes.

<Component { ...props } />