单击反应中的组件时如何创建相同类型的组件？

Question

我想在单击多边形时创建一些子多边形。我该怎么做？地图加载时创建的第一个多边形。 在clickHandler方法中，从服务器获取一些多边形坐标。

    clickHandler(id) {
        let areaType = 'city' // every clicked gonna change, assigned 'city for now
        axios.get(`http://127.0.0.1:8000/service/${areaType}/${id}/`)
        .then(res => {
            this.setState({areas: res.data})
            this.render() 
            
        })

    }


    render(){
        return (
            this.props.areas.map(area => 
                <Polygon
                    id={area.name}
                    key={area.id}
                    paths={area.coordinates}
                    name={area.name}
                    strokeColor={'#000000'}
                    strokeOpacity= {1}
                    strokeWeight={1.2}
                    fillOpacity={0.3}
                    fillColor= {'#00ff00'}
                    onClick={() => this.clickHandler(area.id)} 
                    areas={this.state.areas} //send new areas to create children polygons
                   
                >
                                 
                </Polygon>
            )
        )   
    }

Answer 1

尝试直接使用SVG。重新编写问题。