Je suis un développeur angulaire et je viens de commencer à explorer l'API de réaction en utilisant https://babeljs.io/repl . i Vous venez d'ajouter les balises de script CDN pour réagir en HTML et commencez à explorer le réact.Createeelement Code> API. P> // jsx
const e5 = <div name="taylor">{this.props.name}</div>;
// babel generated script
const e5 = React.createElement(
"div",
{ name: "taylor" },
this.props.name// This throws undefined
);
ReactDOM.render(e2, document.getElementById('root'));
3 Réponses :
En réalité, Par exemple, si vous écrivez le même JSX dans une fonction de rendu de composant basé sur une classe, ceci code> ne fait référence à rien si vous pensez à {this.props.name} div>; code> comme ordinaire JSX (Même il est indéfini si vous essayez de le transpirer sur https://es6console.com/ ). ceci code> ne se réfère pas à la portée intérieure de réact.Createeelement code>. Il fait référence à la valeur de ceci code> où vous exécutez {this.props.name} div>; p>. ceci code> se référera à ce composant. Et s'il a nom code> dans ses accessoires, il sera transmis comme paramètre paramètre CreeEeEeey code>. Cet exemple élabore plus. P> import React, {Component} from 'react'
class MyComp extends Component {
render () {
// you have access to 'SomeName' in 'div' props not 'MyComp' props. but you are not defining div. right?
return (<div name="SomeName">{this.props.name}</div>)
}
}
class SomeOther extends Component {
render () {
// "TopLevelName" is available in MyComp as prop.
return (<MyComp name="TopLevelName" />)
}
}
La réponse à votre question est que le Le deuxième argument est la propriété que vous allez passer à l'élément. p>
a) ici, si l'élément est un composant réacteur, les propriétés seront transmises au composant et peuvent être accessibles par le b) S'il s'agit d'un élément HTML, il sera attribué à l'élément lui-même. Exemple: nom de classe, nom d'identification, style CSS p> li>
Le dernier argument est les enfants de cette composante. Cela peut être une chaîne citée comme indiquée dans votre code, auquel cas le contenu sera interprété comme texte. P> li>
ol> Par conséquent, votre code fonctionnera si vous le faites comme si vous le souhaitez: p> p> CreeEeEeElement code> a trois paramètres.
div code>, span code>, h1 code>) ou le composant réact. li >
ceci.props code> comme vous l'avez fait dans votre code. P >
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
var props = { name: "taylor" }
const es5component = React.createElement(Hello, props)
ReactDOM.render(es5component, document.getElementById('app'));
réagir a 2 façons de créer un composant, qui utilise Ceci est ma démonstration Comment créer un élément par fonction sur jsfiddle strong> https://jsfiddle.net/huynhsamha/e9sjzndl/ p> Vous pouvez faire comme avec jsx p> et babel générera à p> Vous pouvez faire comme avec JSX P> fonction code> ou composants code>, vous pouvez vous référer à https://reactjs.org/docs/components-and-props.html Ce code> ne fonctionne que avec CLASSE CODE> Component Way pour obtenir accessoires code>, avec fonction code> WAY, nous devrions passer accessoires comme paramètre. p>
p> Fonction Composant Way H2>
p> Composant de classe h2>
class E6 extends React.Component {
render() {
return React.createElement(
"div",
null,
this.props.name
);
}
}
const e6 = React.createElement(E6, { name: "taylor" });
ReactDOM.render(e6, document.getElementById('root'));
Merci ! Remarque Si vous utilisez le mode de fonctionnement fonction sur une carte, vous devez transmettre la touche sur le sous-composant comme ceci: const e5 = (accessoires) => < touche div = {accessurekey}> {props.name} // créer un composant et const e5 = E5 ({nom: 'Taylor', clé: 'Taylor'})
Il jette une erreur car les accessoires n'ont pas
valeur . Il n'a quenom@Thinker mis à jour toujours la même erreur. Fondamentalement, lorsque la propriété n'existe pas, il retournera indéfini et non erroné, si les accessoires elles-mêmes indéfinis, alors jette une erreur. :). Techniquement, le problème n'est pas à cause de l'âge ou du nom, c'est parce que
ceci.props est indéfini