const AppRendrer =(props)=>(<div {...props}/>)

class App extends  React.Component{
  render(){
    return <AppRendrer>This is test</AppRendrer>
  }
}


export default App;

Wyjście powyżej jest "To jest test", jeśli używam <div {...props}/>

const AppRendrer =(props)=>(<div>{props.children}</div>)

class App extends  React.Component{
  render(){
    return <AppRendrer>This is test</AppRendrer>
  }
}


export default App;

Wyjście powyżej jest również "To jest test", jeśli używam {props.Children}

Czy mogę wyjaśnić, jak <div {...props}/> and <div>{props.children}</div> są takie same

Z góry dziękuję.

2
user3256451 25 luty 2019, 21:39

2 odpowiedzi

Najlepsza odpowiedź

JSX jest cukrem składniowym dla React.createElement, dzieci elementu reagowania są tłumaczone na children prop, dzięki sposobu, w jaki działa, jak createElement działa.

<p className="class">foo</p>

Jest przekształcony

React.createElement('p', { className: 'class' }, 'foo');

To samo co:

React.createElement('p', { className: 'class', children: 'foo' });

Oba wynik w obiekcie Element Reaction:

{ type: 'p', props: { className: 'class', children: 'foo' }, ... }

createElement Obsługuje dzieci jako oddzielne argumenty, aby uczynić ją bardziej zwięzłą, gdy jest używany bez JSX:

React.createElement('p', null,
  React.createElement('b', null,
   'foo'
  )
);

<div {...props}/> i <div>{props.children}</div> nie są takie same. <div {...props}/> przechodzi wszystkie rekwizyty, gdy <div>{props.children}</div> przechodzi tylko children. Pracują tak samo, ponieważ nie było innych rekwizytów.

Byłyby takie same, gdyby były <div children={props.children}/> i <div>{props.children}</div>.

2
Estus Flask 25 luty 2019, 19:39

W reakcji, zagnieżdżanie elementów takich jak:

<ComponentA>
    <ComponentB />
</ComponentA>

... jest traktowany tak samo jak gdybyś przekazał rekwizyty children:

<ComponentA children={<ComponentB />} />

W pierwszym przykładzie, przechodzisz wszystkie rekwizytów z AppRendrer do elementu div (przez składnię do rozprzestrzeniania się) - obejmuje to {{x2} }, Jeśli obecny.

1
Joe Clay 25 luty 2019, 18:59