Réagir JS: Explication de cette.accessoires de jeu.éléments.élément de la carte
Je suis à l'aide de Réagir JS pour le Rendu du contenu HTML. Le problème est que je ne suis pas en mesure de comprendre en particulier la section de code de ce qu'il fait.
Si vous pouvez voir un échantillon de base de la Liste des choses à faire à partir du lien ci-dessous
http://facebook.github.io/react/
<script type='text/jsx'>
/** @jsx React.DOM */
var TodoList = React.createClass({
render: function(){
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
var TodoApp = React.createClass({
getInitialState: function(){
return {items:[], text: ''}
},
onChange: function(e)
{
this.setState({text: e.target.value});
},
handleSubmit: function(e)
{
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = ''
this.setState({items: nextItems, text: nextText});
},
render:function(){
return (
<div>
<h3>ToDo List</h3>
<TodoList items={this.state.items}/>
<form onSubmit={this.handleSubmit}>
<input type="text" onChange={this.onChange} value={this.state.text}/>
<button>Add #{this.state.items.length+1}</button>
</form>
</div>
)
}
});
React.render(<TodoApp />, document.getElementById('toDoListApp'));
</script>
Je suis fondamentalement pas en mesure de comprendre ce carte et comment créer un élément paramètres de travail. Quelqu'un pourrait-il fournir des précisions sur le même:
var TodoList = React.createClass({
render: function(){
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
Grâce,
Ankit
OriginalL'auteur Ankit Tanna | 2015-03-05
Vous devez vous connecter pour publier un commentaire.
map
est pas une caractéristique de la React.js. Vous pouvez appeler cette fonction sur n'importe quel tableau que vous voulez. Vous devriez regarder lors de sa de la documentation au MDN.Essentiellement, la carte est pour la conversion d'un tableau à un autre tableau avec les éléments modifiés.
Par exemple:
serait de retour d'un nouveau tableau comme ceci:
[2,3,4]
Dans votre exemple, la carte est utilisée pour convertir un tableau avec des éléments de type "chaîne" d'un tableau de Réagir.DOM.li éléments.
L'auteur de votre exemple pourrait également avoir fait comme ceci
OriginalL'auteur Van Coding
props
est un objet contenant des propriétés transmise d'un parent à un enfant composant.Donc
props.items
est la propriété nomméeitems
qui est un tableau.props.item.map()
les cartes de laitems
arrary à un tableau deli
s.OriginalL'auteur helpermethod
Il faudra
this.props.items
tableau, passer chaque élément de lacreateItem
fonction, et retourne un tableau de valeurs de retour de chaque appel.Spécifiquement pour ce code, si vous avez eu ce dans
this.props.items
:Vous obtiendrez quelque chose comme ceci à partir de la carte d'appel:
OriginalL'auteur Briguy37
this.props.items
est un tableau etmap
retour le nouveau tableau seloncallback function
qui fournissent un premier argument, il est très facile à utiliser ES6 et JSX.<tr> { this.arr.map((obj, i) => <td key={i}> {obj.name} </td>) } </tr>
Dans notre exemple, il sera de retour tableau de
td's
map
prend une fonction de rappel comme premier argument et lecallback function
appelée pour chaque élément dearray
, fonction de rappel vous donner de l'élément sur la premièreparameter
dans notre exemple estobj
. vous pouvez utiliserobj.uuid
OriginalL'auteur Umair Ahmed