反应：子组件正在从父组件接收部分道具[重复]

Question

我有一个父组件 plotMap，它从 state 中获取一个名为“plots”的数组。每个绘图都有一个 id ("_id") 属性和一个 GeoJSON 对象。我使用它作为键，并映射“地块”，为每个地块返回一个子标记组件。当我遍历“plots”数组以查看每个图的属性时，我可以看到每个图都有一个 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 的提示，但它们不会传递给您的组件。 如果您需要在组件中使用相同的值，请将其作为具有不同名称的 prop 显式传递：