Wie Bildstelle als Requisite zu einer anderen Komponente übergeben und in require-Methode verwendet werden

Question

Ich habe zwei .js-Dateien. Die zweite Datei rendert eine Kartenkomponente. Ich möchte diese Komponente 3 Mal aus der ersten Datei mit unterschiedlichen Bildstandorten als Requisiten zur zweiten Datei aufrufen und das Bild über die require-Methode in der zweiten Datei anzeigen. Hier ist was ich versucht habe.
erste Datei

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

Zweite Datei

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

Hinweis: Die Bildstellen sind an die Stelle der zweiten Datei w.r.t.
Fehler: benötigen, müssen Einzel Stringliteral Argument haben (Dies ist der Fehler, den ich auf Ausführen der App bekommen)

Answer 1

Sie haben eine Reihe von zusätzlichen Klammern in der Kartenkomponente in Ihren Anruf verlangen. Sie haben auch eine Reihe von zusätzlichen Kommas, wenn Sie dp als Requisite übergeben. sollte <CardContent dp="../images/2Dp.jpg" />

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

sein, die funktionieren sollte.

In Ihrem Code verwenden Sie {dp}, die es6 Kurzschreibweise für {dp:dp} ist. require nimmt eine Zeichenfolge als erstes Argument.