複数の小道具をReactコンポーネントに渡す

Question

ImageTextコンポーネントに2つの引数を渡しています。
正しい方法であるかどうかわからない、またはマップを作成して渡す必要があります。

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

機能コンポーネントを使用する場合（クラスを使用しない場合）、引数として関数に関数を渡す必要があります。

コンポーネントに必要な数だけ渡すことができます。

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