ReactJS - przegląd rekwizytów

Główna różnica między stanem a rekwizytami polega na tym propssą niezmienne. Dlatego komponent kontenera powinien definiować stan, który może być aktualizowany i zmieniany, podczas gdy komponenty potomne powinny przekazywać dane ze stanu tylko za pomocą właściwości.

Korzystanie z rekwizytów

Kiedy potrzebujemy niezmiennych danych w naszym komponencie, możemy po prostu dodać rekwizyty do reactDOM.render() funkcja w main.js i użyj go wewnątrz naszego komponentu.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

Spowoduje to następujący wynik.

Domyślne rekwizyty

Można również ustawić domyślne wartości właściwości bezpośrednio w konstruktorze składnika zamiast dodawać go do pliku reactDom.render() element.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Wyjście jest takie samo jak poprzednio.

Stan i rekwizyty

Poniższy przykład pokazuje, jak połączyć statei rekwizyty w Twojej aplikacji. Ustawiamy stan w naszym komponencie nadrzędnym i przekazujemy go do drzewa komponentów za pomocąprops. W środkurender funkcję, którą ustawiamy headerProp i contentProp używane w komponentach potomnych.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Wynik znowu będzie taki sam jak w poprzednich dwóch przykładach, jedyną różnicą jest źródło naszych danych, które teraz pochodzą z state. Kiedy chcemy go zaktualizować, wystarczy zaktualizować stan, a wszystkie komponenty potomne zostaną zaktualizowane. Więcej na ten temat w rozdziale Wydarzenia.