reactjs 默认 prop 在 prop 中不可见

mspsb9vt  于 2023-06-29  发布在  React
关注(0)|答案(1)|浏览(103)

我是react的新手,正在学习react和deckgl
在react组件中的这段代码中,我创建了一个类,并将一组值作为defaultProps,但当我控制台时,我只获得创建示例时传递的数据

import DeckGL from "@deck.gl/react"
import { IconLayer, TextLayer } from "@deck.gl/layers";
import {CompositeLayer} from "@deck.gl/core"
import Map from "react-map-gl";
import { useState, useMemo } from "react";

const MAPBOX_ACCESS_TOKEN = '<access_token>';

const intitalViewState = {
  longitude: -54.9817,
  latitude: -12.3768,
  zoom: 2.0,
  bearing: 0,
};

class LabeledIconLayer extends CompositeLayer{
    static layerName = "iconLabel"
    // initalizeState(){
    //     super.initalizeState()
    // }

    renderLayers(){
        console.log(this.props)
        const updateTriggerSpikes = {
            getPosition: this.props.updateTrigger?.getPosition,
            getColor: this.props.updateTrigger?.getColor
        }

        return [
            new IconLayer({...this.props, id: `icon-layer-${this.props.id}`, 
                updateTrigger: {...updateTriggerSpikes},
                data: this.props.data,
        }),
            new TextLayer({...this.props, id: `text-layer-${this.props.id}`,
                data: this.props.data,
                updateTrigger: {...updateTriggerSpikes, getIcon: this.props.updateTrigger?.getIcon},
                billboard: true,
            })
        ]
    }
}
//  layer 1 = icon layer
// layer2 = text layer

LabeledIconLayer.defaultProps = {
    // for both layers
    getPosition: {type: 'accessor', value: (d)=>d.position|| [0, 0] },
    pickable: {type: "boolean", value: true},
    getSize: {type: "function", value: (d)=>d.size || 25},
    getColor: {type: "accessor", value: (d)=>d.color || [0, 0, 0, 255]},
    // accessor for layer 1 initialize with null value
    //  i dont know how it can be accessor but not function
    getIcon: {type: "accessor", value: (d)=>d.avatar},
    // properties for layer1
    iconAtlas : { type: "string", value: null},
    iconMapping: {type: "object", value: {}},
    sizeScale: {type: "number", value: 15},
    // accessor for layer 2
    getText: {type: "accessor", value: (d)=>(d.text || "N/A")},
    // properties of layer2
    getTextAnchor: { type: "string", value: 'middle'},
    fontWeight: {type: "number", value: 160}
}

export default function SampleDeckGL(){

const [data,setData] = useState([{position: [-54.9817, -12.3768], text: "Pravin", size: 25, avatar: {url: "https://avatars1.githubusercontent.com/u/7025232?v=4", height: 1280 , width: 1280 }}]);

const layers = useMemo (()=>(
    new LabeledIconLayer({
    id: "composite label layer",
    data,
    billboard: false,    
})
), [data])

return (
    <DeckGL
        initialViewState = {intitalViewState}
        controller = {true}
        layers = {[ layers ]}
    >
        <Map mapboxAccessToken={MAPBOX_ACCESS_TOKEN} mapStyle="mapbox://styles/mapbox/streets-v9" antialias={true}/>
    </DeckGL>
)
}

控制台输出为

我应该在哪里获得默认的props值??
请帮忙

myss37ts

myss37ts1#

React在调用JSX转换的函数时解析默认props(源代码)。您需要通过JSX或其转换到的底层React API示例化LabeledIconLayer。

const layers = <LabeledIconLayer id="id" data={data} billboard={false} />

React有两个jsx转换。“传统”和“自动”。上面的代码将被编译为

import { jsx as _jsx } from "react/jsx-runtime";
const layers = /*#__PURE__*/_jsx(LabeledIconLayer, {
  id: "id",
  data: data,
  billboard: false
});

通过“自动”变换。默认的props在_jsx函数中应用。因此,如果您没有使用JSX,您可以用这种低级的方式示例化您的组件。

相关问题