web-dev-qa-db-fra.com

Passage de plusieurs accessoires dans le composant React

J'essaie de passer deux arguments en utilisant des accessoires dans le composant ImageText.
Je ne sais pas si c'est la bonne méthode ou si je dois créer une carte puis la transmettre.

import React, { PropTypes, Component } from 'react'

const ImageText = () => (
    <div className="img-with-text">
        <img  className="img" src={props.imageUrl} />
        <p className="txt">{props.imageText}</p>
    </div>
);

export default ImageText;

Appeler ce composant d'un autre comme suit

<ImageText imageUrl="/js.com" imageText="food"/>

Mais jette erreur comme

Uncaught (in promise) ReferenceError: props is not defined
    at ImageText
javascripthtmlreactjs
5
oxy_js

Dans votre cas, le problème avec vous utilisez "les fonctions de flèche" qui doit passer des paramètres entre crochets 

const ImageText = () => (

Devrait être 

 const ImageText = (props) => (

À présent 

let props = {
imageUrl:"/js.com",
imageText:""food""
}
<ImageText {...props} />

Accès dans ImageText comme 

{props.imageUrl} or {props.imageText}
13
BEJGAM SHIVA PRASAD

Lorsque vous définissez votre composant comme cela, vous devez transmettre vos accessoires en tant que paramètres à la fonction anonyme:

const ImageText = ({imageUrl, imageText}) => ( ... reste du code ...);

1
Cornel Janssen

Lorsque vous utilisez un composant fonctionnel (lorsque vous n'utilisez pas de classe), vous devez transmettre les accessoires en tant qu'argument à la fonction.

Vous pouvez transmettre autant d'accessoires que vous avez besoin à un composant. 

const ImageText = (props) => (...

Si vous utilisez un composant standard (en tant que classe), appelez un accessoire avec

this.props

1
DirtyRedz

vous passez les accessoires au composant de vidage. ce n'est pas réagir composant. passe les accessoires à dump comme argument de fonction.

> import React, { PropTypes, Component } from 'react'
> 
> const ImageText = ({imageUrl, imageText}) => (
>     <div className="img-with-text">
>         <img  className="img" src={imageUrl} />
>         <p className="txt">{imageText}</p>
>     </div> );
> 
> export default ImageText;
0
Khalid Azam