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

在您的情况下，您正在使用＆＃34;箭头功能＆＃34;需要在括号内传递参数

const ImageText = () => (

应该是

 const ImageText = (props) => (

现在

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

在ImageText中访问

{props.imageUrl} or {props.imageText}

Answer 2

当您像这样定义组件时，需要将props作为参数传递给匿名函数：

const ImageText =（{imageUrl，imageText}）=＆gt; （ ......其余代码...... ）;

Answer 3

当使用功能组件时（当你不使用类时），你必须将props作为参数传递给函数。

您可以将所需的道具添加到组件中。

const ImageText =（props）=＆gt; （...

如果使用标准组件（作为类），您可以使用

调用prop

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;

将多个道具传递给React组件

4 个答案: