傳遞多個道具到React組件

Question

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

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 

Answer 1

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

const ImageText =() => (

應該

const ImageText = (props) => (

現在

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

訪問ImageText裏面像

{props.imageUrl} or {props.imageText} 

Answer 2

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

const ImageText =（{imageUrl，imageText}）=>（ ...其餘代碼... ）;

Answer 3

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

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

常量ImageText =（道具）=>（...

如果使用標準組件（如類），你會召喚道具與

this.props

Answer 4

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

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