Przejścia tablicy jako rekwizytów w reactjach

Question

Jestem nowy, aby zareagować.

Eksperymentowałem na reakcję i utknąłem na tym, jak przekazywać tablicę za pomocą rekwizytów.

przypadek 1:

var c = ['program']; 
var Navigation = React.createClass({ 
    getInitialState: function() { 
     return { 
      openDropdown: -1 
     }; 
    }, 
    getDefaultProps: function() { 
     return { 
      config: ['everyone'] 
     }; 
    }, 
    render: function() { 
     return (
      <div className="navigation"> 
       helloworld {this.props.config[0]}; 
      </div> 
      ); 
    } 
}); 

React.render(<Navigation config={c}/>, document.body); 

to renderowania programu helloworld. który jest oczekiwany.

Później próbowałem.

przypadek 2:

var c = ['program']; 
var Navigation = React.createClass({ 
    getInitialState: function() { 
     return { 
      openDropdown: -1 
     }; 
    }, 
    getDefaultProps: function() { 
     return { 
      config: ['everyone'] 
     }; 
    }, 
    render: function() { 
     return (
      <div className="navigation"> 
       {this.props.config} helloworld ; 
      </div> 
      ); 
    } 
}); 

React.render(<Navigation config="React"/>, document.body); 

to renderowanie React helloworld. który jest oczekiwany, ponieważ nie ma zdefiniowanego typu propType.

Następna próbowałem.

przypadek 3:

var c = ['program']; 
var Navigation = React.createClass({ 
    getInitialState: function() { 
     return { 
      openDropdown: -1 
     }; 
    }, 
    getDefaultProps: function() { 
     return { 
      config: ['everyone'] 
     }; 
    }, 
    render: function() { 
     return (
      <div className="navigation"> 
       helloworld {this.props.config[0]}; 
      </div> 
      ); 
    } 
}); 

React.render(<Navigation config=['!!!'] />, document.body); 

który nie jest nic renderowania.

Później kiedy zmienili React.render(<Navigation config=['!!!'] />, document.body); do React.render(<Navigation config={['!!!']} />, document.body);

to renderowane helloworld !!!

W samouczku przeczytałem, że nawiasy klamrowe są używane do przekazywania zmiennych, dzięki czemu JSX będzie wiedział, że są to zmienne zewnętrzne.

Ale dlaczego case-3 nie działa z jawnymi nawiasami klamrowymi, mimo że tablica jest tworzona podczas połączenia i dlaczego działa dla przypadku-2, w którym łańcuch jest wstawiany w linii.

Kiedy dokładnie używane są nawiasy klamrowe?

Pomoże mi też, jeśli ktoś wskaże mi jakąś dobrą książkę lub samouczki online na temat reakcji.

Answer 1

W nawiasach JSX muszą być używane nawiasy klamrowe tylko. Tak:

<MyComponent somProp={['something']} /> 

W przypadku powyżej, {} jest sposobem na powiedzenie: „Ocenić wyrażenie, które mijałem wewnątrz i przekazać go jako rekwizyt”. Wewnątrz obiektu {} można przekazać dowolny prawidłowy obiekt JavaScript lub wyrażenie. Zwróć uwagę, że jeśli przekazujesz ciąg znaków, a konkretnie dla ciągów, nie potrzebujesz klamrowych klamer, takich jak <MyComponent somProp="something" />.

Powyższy kod jest odpowiednikiem tego:

var myArray = ['something']; 
<MyComponent somProp={myArray} /> 

Answer 2

rzeczywiście nie trzeba określić PropTypes w ogóle używać rekwizytów. Jest to dobry sposób dokumentowania i weryfikowania typów podpór podczas programowania.

Używasz prawidłowo {}. {} zwróci wartość wyrażenia w środku.

Jednak{['everyone']} nie ma większego sensu. Tutaj pytasz React, aby zwrócić wartość samej tablicy, a nie jednego z elementów/wartości w tablicy.

Aby uzyskać pierwszą wartość z macierzy, powinieneś wykonać: {this.props.config[0]}, ponieważ wartość "wszyscy" jest na indeksie 0 tablicy.

Jeśli tablica miała wiele wartości, byś zrobił coś wzdłuż linii:

render: function() { 
    var values = this.props.config.map(function(value, i){ 
    return (
     <p>value</p> 
    ); 
    }); 

    return (
    <div className="navigation"> 
     helloworld {values}; 
    </div> 
); 
} 

Jeśli naprawdę oznacza faktycznie wydrukować samej tablicy, a nie konkretna wartość w nim, masz dwie dobre opcje:

render: function() { 
    return (
    <div className="navigation"> 
     helloworld {this.props.config.toString()}; 
    </div> 
); 
} 

Albo

render: function() { 
    return (
    <div className="navigation"> 
     helloworld {JSON.stringify(this.props.config)}; 
    </div> 
); 
} 

Answer 3

render: function() { 
    return (
    <ChildComponent childprop={{Array.of(arrayitem)}} className="navigation"> 

); 
}