react.js 將值傳遞給子函數

Question

我正在嘗試在 react.js: inside render創建一個帶有疊加層的地圖，我得到了這個：

<Map
                    provider={providers.osm}
                    defaultCenter={[22.3402092,91.8124206]}
                    center={[22.3402092,91.8124206]} zoom={this.state.zoom}
                    width={window.innerWidth*.8} height={window.innerHeight*.8}>

                    {
                        this.line()
                    }

                </Map>

我的line如下所示：

    line = ({ mapState: { width, height }, latLngToPixel,  style = { stroke: 'rgb(255,0,0)', strokeWidth: 2 } }) => {

        let coordsArray=this.state.vertex;

        if (coordsArray.length < 2) {
            return null;
        }

        let lines = [];
        let pixel = latLngToPixel(coordsArray[0]);




        for (let i = 1; i < coordsArray.length; i++) {
            let pixel2 = latLngToPixel(coordsArray[i]);
            lines.push(
                <line key={i} x1={pixel[0]} y1={pixel[1]} x2={pixel2[0]} y2={pixel2[1]} style={style} />
            );
            pixel = pixel2;
        }

        return (
            <svg width={width} height={height} style={{ top: 0, left: 0 }}>
                {lines}
            </svg>
        )
    }

它說無法讀取 undefined 的屬性“mapState”，我該如何解決？

代碼和盒子.io

Answer 1

您不向 this.line 傳遞參數，因此 mapState 將始終未定義

在這一行中({ mapState: { width, height },您正在從參數中解構 mapState。由於您沒有將任何內容傳遞給this.line()因此它始終是未定義的。

要將道具傳遞給this.line()只需在括號this.line(this.props)添加您想要的任何參數。

但是將道具從地圖傳遞到線是不可能的，除非地圖有一些可以檢查的隱藏上下文。