画像の場所を別のコンポーネントに渡して、必要なメソッドで使用する方法

Question

2つの.jsファイルがあります。 2番目のファイルは、カードコンポーネントをレンダリングします。このコンポーネントを、最初のファイルから別のイメージの場所を持つ2番目のファイルのpropsとして3回コールし、2番目のファイルのrequireメソッドを使用してイメージを表示します。 これは私が試みたものです。
最初のファイル

<CardContent 
     dp= "'../images/1Dp.jpg'" /> 
<CardContent 
     dp= "'../images/2Dp.jpg'" /> 
<CardContent 
     dp= "'../images/3Dp.jpg'" /> 

第二のファイル

const { dp } = props; 
return(
    <Card> 
    <CardItem> 
     <Left> 
     <Thumbnail source={require({dp})} /> 
     </Left> 
    </CardItem> 
    </Card> 
); 

注：画像の位置を第二のファイルの場所にw.r.tれます。
エラー：は、単一の文字列リテラルの引数（これは私がアプリを実行する上で取得エラーです）

Answer 1

あなたが必要と通話中にカードのコンポーネントに余分な括弧のセットを持っている必要があります必要があります。 dpを小道具として渡すと、余分なカンマもあります。 <CardContent dp="../images/2Dp.jpg" />

const { dp } = props; 
return(
    <Card> 
    <CardItem> 
     <Left> 
     <Thumbnail source={require(dp)} /> 
     </Left> 
    </CardItem> 
    </Card> 
); 

これはうまくいくはずです。

{dp}は{dp:dp}のes6略記です。 requireは、最初の引数として文字列をとります。