将多个道具传递给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

在您的情况下,您正在使用"箭头功能",需要在括号内传递参数

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}) => ( ... 其余代码 ... );