array di passaggi come oggetti di scena in reactjs

Question

Sono nuovo a reagire.

Ho sperimentato su reagire e sono rimasto bloccato su come passare array utilizzando oggetti di scena.

caso-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); 

Questo è il rendering programma helloworld. che è previsto.

Successivamente ho provato.

caso-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); 

Questo è il rendering React helloworld. che è previsto in quanto non sono definiti propType.

avanti Ho provato.

caso-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); 

Che non sta rendendo nulla.

Più tardi, quando ho cambiato il React.render(<Navigation config=['!!!'] />, document.body);-React.render(<Navigation config={['!!!']} />, document.body);

è reso helloworld !!!

Ho letto in alcuni tutorial che le parentesi graffe vengono utilizzate per passare variabili in modo che JSX sappia che sono variabili esterne.

Ma perché il case-3 non funziona con le parentesi graffe esplicite nonostante l'array sia stato creato durante la chiamata e perché funzioni per il caso-2 in cui la stringa viene eseguita in linea.

Quando vengono utilizzate le parentesi graffe?

E mi aiuterebbe se qualcuno mi può indirizzare a qualsiasi buon libro o tutorial online per reagire.

Answer 1

Le parentesi graffe solo devono essere utilizzate all'interno di elementi JSX. Come questo:

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

Nel caso di cui sopra, la {} è il modo di dire: "Valutare l'espressione che ho passato dentro e passarla come un oggetto di scena". All'interno dello {} è possibile passare qualsiasi oggetto o espressione JavaScript valido. Nota che se passi una stringa, e in particolare per le stringhe, non hai bisogno delle parentesi graffe ... come <MyComponent somProp="something" />.

Il codice di cui sopra è l'equivalente di questo:

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

Answer 2

In realtà non è necessario specificare PropTypes a tutti l'utilizzo di elementi. È solo un buon modo per documentare e verificare i tipi di oggetti durante lo sviluppo.

Si sta utilizzando il {} correttamente. {} restituirà il valore dell'espressione all'interno.

Tuttavia,{['everyone']} non ha molto senso. Qui stai chiedendo a React di restituire il valore dell'array stesso, piuttosto che uno degli elementi/valori all'interno dell'array.

Per ottenere il primo valore dall'array, è necessario eseguire: {this.props.config[0]} poiché il valore "Everyone" è nell'indice 0 dell'array.

Se l'array ha più valori, si dovrebbe fare qualcosa sulla falsariga di:

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

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

Se veramente intenzione di stampare in realtà la matrice stessa, e non un particolare valore all'interno di esso, si ha due buone opzioni:

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

O

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"> 

); 
}