2016-12-27 151 views
2

我想通過ImageText組件中的道具傳遞兩個參數。
我不確定它是正確的方法還是我必須創建一個映射然後傳遞它。傳遞多個道具到React組件

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; 

調用從另一個該組件如下

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

但拋出的錯誤作爲

Uncaught (in promise) ReferenceError: props is not defined 
    at ImageText 
+0

傳遞函數參數中的道具 –

回答

5

你的情況,問題與您正在使用的需要通過括號內PARAMS 「箭功能」

const ImageText =() => (

應該

const ImageText = (props) => (

現在

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

訪問ImageText裏面像

{props.imageUrl} or {props.imageText} 
0

當你這樣定義你的組件,你需要通過你的道具作爲參數傳遞匿名函數:

const ImageText =({imageUrl,imageText})=>( ...其餘代碼... );

0

當使用功能組件(當您不使用類時),您必須將道具作爲參數傳遞給該函數。

您可以通過儘可能多的道具添加到組件中。

常量ImageText =(道具)=>(...

如果使用標準組件(如類),你會召喚道具與

this.props

+0

這是正確的我不知道我們如何得到downvotes。 –

0

你正在傳遞道具到轉儲組件,它不是反應組件,將道具作爲函數參數傳遞給轉儲

> 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; 
相關問題