传递多个道具到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;