javascript - 打开标记reactjs onclick

Question

我在我的项目中使用reactjs和谷歌地图

我想显示一些标记，但是当我单击我的标记时，我的所有标记都会出现

我想一次只打开一个标记(onclick) 你能告诉我我的功能出了什么问题吗？

 const MapWithAMakredInfoWindow = compose(
        withStateHandlers(() => ({
            isOpen: false,
        }), {
            onToggleOpen: ({ isOpen }) => () => ({
                isOpen: !isOpen,
            })
        }),

        withScriptjs,
        withGoogleMap
    )(props =>
        <GoogleMap
            defaultZoom={8}
            defaultCenter={{ lat: 44.8350088, lng: -0.5872689999999999 }}
        >

            {this.state.PartenaireData.map(function (item, i) {
                if (item.coordinates.latitude && item.coordinates.longitude)
                    return (
                        <Marker
                            position={{ lat: item.coordinates.latitude, lng: item.coordinates.longitude }}
                            onClick={props.onToggleOpen}
                            key={i}
                        >
                            { (props.isOpen ) &&
                            <InfoWindow  onCloseClick={props.onToggleOpen}>
                                <div>
                                    <div>{item.titre}</div>
                                    <div >autre data</div>
                                </div>
                            </InfoWindow>}
                        </Marker>)
            })}


        </GoogleMap>
    );

Answer 1

isOpen 和 onToggleOpen 应该是 Marker 的属性，而不是 GoogleMap。

通过将它们传递给 GoogleMap，您将它们设为全局(所有标记都相同)。因此，将 isOpen 设置为 true 将打开所有标记。

可能是这样的

const MapWithAMakredInfoWindow = compose(
    withScriptjs,
    withGoogleMap
)(props =>
    <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: 44.8350088, lng: -0.5872689999999999 }}
    >

        {this.state.PartenaireData.map(function (item, i) {
            if (item.coordinates.latitude && item.coordinates.longitude)
                return (
                    compose(
                        withStateHandlers(() => ({
                            isOpen: false,
                        }), {
                            onToggleOpen: ({ isOpen }) => () => ({
                                isOpen: !isOpen,
                            })
                        })
                    )(markerProps =>
                        <Marker
                            position={{ lat: item.coordinates.latitude, lng: item.coordinates.longitude }}
                            onClick={markerProps.onToggleOpen}
                            key={i}
                        >
                            {(markerProps.isOpen) &&
                                <InfoWindow onCloseClick={markerProps.onToggleOpen}>
                                    <div>
                                        <div>{item.titre}</div>
                                        <div >autre data</div>
                                    </div>
                                </InfoWindow>}
                        </Marker>
                    )
                );
        })}
    </GoogleMap>
);