返されたhtmlコードの属性参照渡し値属性

Question

私は何かダムをやっていると確信していますが、なぜこのコードがうまく動作しないのかわかりません。私は、エラーにエドを

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> 

感謝を取得

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> 

      ) 
      }) 
     ) 
     }); 

：それは私がWebPACKのでコンパイルしていたコードを反応させるのです。

Answer 1

あなたはそれがだから、これが有効なJSXではありませんJS式

すなわち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

あるとして{}内にラップ小道具の配列を渡す必要があります。代わりに以下を試してみてください。私はさらに助けるために受け入れようとしているポジションを見なければならないでしょう。

<Marker position={[asset.location.coordinates[0], asset.location.coordinates[1]]}> 
       <Popup> 
        <span>A pretty CSS3 popup.<br/>Easily customizable.</span> 
       </Popup> 
       </Marker> 

Answer 3

これがレンダリング機能で返される場合は、結果がいくつかの要素にラップされていることを確認してください。現在のレンダー機能では、コンポーネントの配列を返すことはできません