Co to znaczy ...reszta w Reaccie JSX

Patrząc na przykład Reactowego routera Dom v4 https://reacttraining.com/react-router/web/example/auth-workflow widzę, że PrivateRoute komponent niszczy rekwizyt spoczynkowy jak ten 

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

Chcę mieć pewność, że { component: Component, ...rest } oznacza:

Z props, Pobierz propa komponentu, a następnie wszystkie inne Propy, i zmień nazwę props na rest, Aby uniknąć problemów z nazwami z propami przekazanymi do trasy render function

Mam rację?
Author: Let Me Tink About It, 2017-04-19
Source

3 answers

Przepraszam, zdałem sobie sprawę, że moja pierwsza odpowiedź (choć mam nadzieję, że nadal dostarcza użyteczny / dodatkowy kontekst) nie odpowiada na twoje pytanie. Spróbuję jeszcze raz.

Pytasz:

Chcę mieć pewność, że { component: Component, ...rest } oznacza:

From props, get the Component prop and then all other props given to ty i zmień nazwę props na {[10] } , aby uniknąć problemów z nazwami z props przekazywana do trasy render funkcja

Twoja interpretacja nie jest do końca poprawna. Na podstawie Twojego chociaż wydaje się, że jesteś przynajmniej świadomy faktu, że to, co się tutaj dzieje, sprowadza się do pewnego rodzaju destrukcji obiektów (zobacz drugą odpowiedź i komentarze tam, aby uzyskać więcej wyjaśnień).

Aby dać dokładne wyjaśnienie, Podzielmy wyrażenie { component: Component, ...rest } na dwie oddzielne operacje:

  1. operacja 1: Znajdź właściwość component zdefiniowaną na props (Uwaga : małe litery c omponent) i przypisanie go do nowej lokalizacji w stanie nazywamy Component (Note : capital C omponent).
  2. operacja 2: następnie pobieramy wszystkie pozostałe właściwości zdefiniowane w obiekcie props i zbieramy je wewnątrz argumentu o nazwie rest.
Ważne jest to, że nie zmieniasz nazwy props na rest. (I nie ma to nic wspólnego z próbą "uniknięcia problemów z nazwami z props przekazanymi do funkcji Route render".) 
rest === props;
// => false

You ' re simply pulling off the rest (stąd nazwa argumentu that) właściwości zdefiniowanych w obiekcie {[6] } w nowy argument o nazwie rest.

Przykładowe Użycie

Oto przykład. Załóżmy, że mamy obiekt " myObj` zdefiniowany następująco: 
const myObj = {
  name: 'John Doe',
  age: 35,
  sex: 'M',
  dob: new Date(1990, 1, 1)
};

W tym przykładzie może pomóc po prostu myśleć o propsjako o tej samej strukturze ( tj., właściwościach i wartościach), jak pokazano w myObj. Teraz napiszmy następujące zadanie.

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

Powyższe stwierdzenie wynosi zarówno deklaracja i przypisanie dwóch zmiennych (lub, jak sądzę, stałych). Twierdzenie można uznać za:

Weź właściwość name zdefiniowaną na myObj i przypisz jej wartość do nowej zmienną nazywamy Username. Następnie, weź to, co inne właściwości były zdefiniowany na myObj (tj., age, sex i dob) i zebrać je do nowego obiektu przypisanego do zmiennej podajemy nazwę rest.

Logowanie Username i rest do console potwierdzi to. Mamy następujące: 

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

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

Side Note

Możesz się zastanawiać:

Po co zadawać sobie trud ściągania component nieruchomości tylko zmienić nazwę Component na wielką literę "C"?

Tak, to wydaje się dość trywialne. I chociaż jest to standardowa praktyka Reacta, nie bez powodu cała dokumentacja Facebook ' A na jego frameworku jest napisana jako taka. Mianowicie, kapitalizowanie niestandardowych komponentów renderowanych za pomocą JSX jest mniej praktyka jako taka niż jest koniecznością. React, a dokładniej, w JSX rozróżnia wielkość liter . Niestandardowe komponenty wstawione bez wielkiej litery nie są renderowane do DOM. Tak właśnie React zdefiniował się w celu identyfikacji własnych komponentów. Tak więc, gdyby przykład nie zmienił dodatkowo nazwy właściwości component, która została usunięta z props na Component, wyrażenie <component {...props} /> nie byłoby poprawnie renderowane.
 159
Author: IsenrichO,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-15 20:00:07

Pozwala Ci "rozprowadzić" wszystkie twoje props w jednym zwięzłym wyrażeniu. Na przykład, załóżmy, że props otrzymany przez twój PrivateRoute komponent wygląda jak 

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

Jeśli chcesz dalej przekazywać te przedmioty ( tj., thing1 i thing2) aż do zagnieżdżonego znacznika <Component /> i nie byłeś zaznajomiony z rozstaw obiektów składnia, możesz napisać: 

<Component
  thing1={ props.thing1 }
  thing2={ props.thing2 } />
Jednak składnia { ...props } eliminuje taką słowność, pozwalając na rozprzestrzenianie się Twój props obiekt w ten sam sposób można rozłożyć tablicę wartości (np., [...vals]). Innymi słowy, wyrażenie JSX poniżej i powyżej są dokładnie równoważne. 
<Component { ...props } />
 13
Author: IsenrichO,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-19 00:48:11

Lets keep it simple: in JavaScript, if a "key: value" pair are the same, obj={account:account} jest tym samym co obj={account}. Tak więc przy przekazywaniu właściwości z komponentu rodzica na komponent potomny: 

const Input = ({name,label,error, ...rest}) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        {...rest}
        autoFocus
        name={name}
        id={name}
        className="form-control"
        aria-describedby="emailHelp"
      />
    </div>
  );
};
export default Input;

Będziesz mijał resztę rekwizytów jako: 

label={label} placeholder={placeholder} type={type}
 4
Author: Yilmaz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-03 15:49:54