在函数map（）

Question

您好我有关于反应组件的问题。我想要做的是在map函数中渲染一个组件，并在map函数内传递每次迭代中返回的对象。

上面的代码对我来说很好。

export class MapContainer extends Component {
    constructor(props) {
        super(props);

        const style = {
            width: '100%',
            height: '100%'
        }
    }

    render() {
        return (
            <Map 
                google={this.props.google}
                style={this.style}
                initialCenter={{lat: 35.85472104, lng: 14.48779873}}
                zoom={11}>

                <Marker onClick={this.onMarkerClick} name={'Current location'} />
            </Map>
        );
    }
}

但正如我之前所说，我想将组件Marker放在map函数中，但它无法正常工作：

import React, { Component } from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

export class MapContainer extends Component {
    constructor(props) {
        super(props);

        const style = {
            width: '100%',
            height: '100%'
        }

        const objMarkers = [
            {
                title: "The marker`s title will appear as a tooltip.",
                name: "Soma",
                position: [35.85472104, "14.48779873"]
            },
            {
                title: "The marker`s title will appear as a tooltip.",
                name: "Soma",
                position: ["35.9220325", "14.37038234"]
            }
        ]
    }

    render() {
        return (
            <Map 
                google={this.props.google}
                style={this.style}
                initialCenter={{lat: 35.85472104, lng: 14.48779873}}
                zoom={11}>

                return this.objMarkers.map((marker) => 
                    <Marker title={marker.title} name={marker.name} />
                );
            </Map>
        );
    }
}

const LoadingContainer = (props) => (
  <div>Fancy loading container!</div>
)

export default GoogleApiWrapper({
  apiKey: ("AIzaSyBHq-A0EL3usDeqH5q8B635Rafxcguc0a8"),
  LoadingContainer: LoadingContainer
})(MapContainer)

非常感谢你的帮助!!!

Answer 1

阅读反应文档中的Lists and Keys，详细说明如何在return中呈现列表。

您的jsx放错了地方。你不能在render() { return ( <Map google={this.props.google} style={this.style} initialCenter={{lat: 35.85472104, lng: 14.48779873}} zoom={11} > {this.objMarkers.map((marker) => ( <Marker key={marker.name} title={marker.title} name={marker.name} /> ))} </Map> ); } 中这样使用它。内联映射数组的正确语法是：

constructor

另请注意，如果您创建相同类型you need to assign a unique key prop to each of them的兄弟姐妹。

同样在你的constructor中你创建了局部变量。它们只存在于this内。您需要将值分配给实例属性，如@Evgeny Timoshenko正确指出的那样，或者render()函数中的constructor(props) { super(props); this.style = { width: '100%', height: '100%' } this.objMarkers = [ { title: "The marker`s title will appear as a tooltip.", name: "Soma", position: [35.85472104, "14.48779873"] }, { title: "The marker`s title will appear as a tooltip.", name: "Soma", position: ["35.9220325", "14.37038234"] } ] } 无法访问这些值：

assert

Answer 2

这样做：

{markers.map.

而不是回归。

Answer 3

尝试在返回的Marker组件集中添加Key，并记住你在 JSX 中，所以使用花括号来返回元素..

{ this.objMarkers.map((marker, index) => 
       <Marker key={index} title={marker.title} name={marker.name} />
    )
}

Here is the Complete reference