我是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值??
请帮忙
1条答案
按热度按时间myss37ts1#
React在调用JSX转换的函数时解析默认props(源代码)。您需要通过JSX或其转换到的底层React API示例化LabeledIconLayer。
React有两个jsx转换。“传统”和“自动”。上面的代码将被编译为
通过“自动”变换。默认的props在
_jsx
函数中应用。因此,如果您没有使用JSX,您可以用这种低级的方式示例化您的组件。