Cant Referenz übergeben Wert Attribut in zurückgegebene HTML-Code

Question

Ich bin sicher, ich mache etwas dumm, aber ich sehe nicht, warum dieser Code nicht funktioniert. Es ist Code reagieren, die ich mit webpack kompilieren bin:

var markers = this.state.assets; 
     assets = assets.map(function(asseti,index){ 
     return(
      asseti.map(function(asset, index){ 
      return(
       <Marker position=[{asset.location.coordinates[0]},{asset.location.coordinates[1]}]> 
       <Popup> 
        <span>A pretty CSS3 popup.<br/>Easily customizable.</span> 
       </Popup> 
       </Marker> 

      ) 
      }) 
     ) 
     }); 

Ich erhalte den Fehler

JSX value should be either an expression or a quoted JSX text 

    90 |   asseti.map(function(asset, index){ 
    91 |    return(
> 92 |    <Marker position=[{asset.location.coordinates[0]},{asset.location.coordinates[1]}]> 
    |        ^
    93 |     <Popup> 
    94 |     <span>A pretty CSS3 popup.<br/>Easily customizable.</span> 
    95 |     </Popup> 

Danke, Ed.

Answer 1

Sie müssen Arrays Requisiten innerhalb {} gewickelt passieren, wie es ein Ausdruck JS ist

d.h position={[asset.location.coordinates[0],asset.location.coordinates[1]]}

markers = this.state.assets; 
    assets = assets.map(function(asseti,index){ 
    return(
     asseti.map(function(asset, index){ 
     return(
      <Marker position={[asset.location.coordinates[0],asset.location.coordinates[1]]}> 
      <Popup> 
       <span>A pretty CSS3 popup.<br/>Easily customizable.</span> 
      </Popup> 
      </Marker> 

     ) 
     }) 
    ) 
    }); 

Answer 2

Das ist also nicht gültig JSX. Versuchen Sie es stattdessen unten. Ich müsste sehen, welche Position akzeptiert wird, um weiter zu helfen.

Answer 3

Wenn dies ist, was Sie in Ihrer Renderfunktion zurückgeben, stellen Sie sicher, dass das Ergebnis in einem Element verpackt ist. Sie können ein Array von Komponenten in Ihrer Renderfunktion nicht so ausgeben, wie es jetzt aussieht.