Question

我确定我做了一些愚蠢的事情，但我不知道为什么这段代码不起作用。它反应了我用webpack编译的代码：

  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>

            )
          })
        )
      });

我收到错误

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>

谢谢，Ed。

Answer 1

你需要传递包含在{}内的道具数组，因为它是一个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

所以这不是有效的JSX。请尝试以下方法。我必须看看有什么职位希望接受进一步的帮助。

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

Answer 3

如果这是您在渲染函数中返回的内容，请确保结果包含在某个元素中。你现在可以在渲染函数中返回一个组件数组

在返回的html代码中无法引用传递值属性

3 个答案: