Question

我有一个父组件plotMap，它获取一个名为＆＃34的数组;绘图＆＃34;来自州。每个图都有一个id（＆＃34; _id＆＃34;）属性和一个GeoJSON对象。我使用它作为键，并映射＆＃34;绘制＆＃34;，以返回每个绘图的子标记组件。当我遍历＆＃34;情节＆＃34;数组看到每个图的属性，我可以看到每个都有一个id。但是，当我控制台记录子组件的属性时，无法找到id（密钥）。然而，GeoJSON显示得很好。这也很奇怪，因为我将具有id属性的绘图作为渲染子组件的条件，我可以在日志中看到正在渲染绘图。

这就是我正在谈论的内容。

父组件（为简洁起见，已编辑）：

export class PlotMap extends Component {
    markers = props => {
        if (props.plots) {
            return (
                <div>
                    {(props.filteredPlots || props.plots).map(
                        plot =>
                            plot.feature &&
                            plot._id && (
                                <PlotMarker
                                    key={plot._id}
                                    id={plot._id}
                                    geoJSON={plot.feature}
                                    position={centroid(plot.feature).geometry.coordinates}
                                />
                            )
                    )}
                </div>
            );
        }
    };

    render() {
        this.props.plots &&
            (this.props.filteredPlots || this.props.plots).forEach(plot => {
                plot.feature && console.log(JSON.stringify(plot._id));
            });

        return (
            <div
                className="col-sm-8 m-auto p-0 flex-column float-right"
                style={{ height: `85vh` }}>
                <Map
                    center={initialMapCenter(this.props)}
                    zoom={initialZoomLevel}
                    zoomControl={true}
                    onZoomend={e => {
                        this.props.setZoomLevel(e.target.getZoom());
                    }}
                    onMoveEnd={e => {
                        this.props.setMapCenter(e.target.getCenter());
                    }}>
                    <LayersControl position="topright">
                        <BaseLayer name="Google Maps Roads">
                            <GoogleLayer googlekey={key} maptype={road} />
                        </BaseLayer>
                        <BaseLayer name="Google Maps Terrain">
                            <GoogleLayer googlekey={key} maptype={terrain} />
                        </BaseLayer>
                        <BaseLayer name="Google Maps Satellite">
                            <GoogleLayer googlekey={key} maptype={satellite} />
                        </BaseLayer>
                        <BaseLayer checked name="Google Maps Hybrid">
                            <GoogleLayer
                                googlekey={key}
                                maptype={hybrid}
                                libraries={['geometry', 'places']}
                            />
                        </BaseLayer>
                    </LayersControl>
                    <SearchBox postion="bottomright" />
                    {this.markers(this.props)}
                </Map>
            </div>
        );
    }
}

子组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import { Marker, GeoJSON } from 'react-leaflet';

export class PlotMarker extends Component {
    render() {
        const { key, id, position, geoJSON, zoomLevel } = this.props;
        console.log(JSON.stringify(this.props.key));
        if (zoomLevel > 14) {
            return <GeoJSON id={id} data={geoJSON} />;
        }
        return <Marker id={id} position={position} />;
    }
}

function mapStateToProps(state) {
    return {
        selectedPlot: state.plots.selectedPlot,
        plotBeingEdited: state.plots.plotBeingEdited,
        zoomLevel: state.plots.zoomLevel
    };
}

export default connect(mapStateToProps, actions)(PlotMarker);

Answer 1

Keys aren't passed as a property to the child on React

键用作React的提示，但它们不会传递给您的组件。 如果组件中需要相同的值，请将其明确地作为具有不同名称的道具传递：

React：子组件正在从父

1 个答案: