javascript - 在区域标签位置放置一个元素

Question

我正在尝试在 React 中实现棋盘游戏。我正在使用区域/地图标签来检测板上的点击。当某些逻辑发生时，我想在区域标签的位置上放置一个刺/石头。如何在 board-img 元素中区域标签的位置放置一个 img 元素？

我已经尝试过这段代码，但它似乎不起作用..

renderBoard() {
    const board = this.state.gameState.board;
    let positionSyle = {};
    let square = this['w1'] ? this['w1'].getBoundingClientRect() : false;
    if (square) {
        {/**Find square w1 and get position its position */ }
        positionSyle = {
            top: square.top + 'px',
            left: square.left + 'px',
        }
    }
    return (
        <React.Fragment>
            {/**render board image + insert areas on board(squares) */}

            <div>
                <img src="board.png" useMap="#image-map" />
                <map name="image-map">
                    <area ref={(c) => this['w1'] = c} target alt="w1" title="w1" coords="387,313,315,244" shape="rect" onClick={() => console.log('w1')} />
                    <area ref={(c) => this['w2'] = c} target alt="w2" title="w2" href coords="295,317,219,243" shape="rect" onClick={() => console.log('w2')} />
                </map>

                <img src={"w-stone.png"} style={{ ...positionSyle, position: 'absolute', width: '50px', height: '50px' }} />
            </div>

        </React.Fragment>

    )
}

当前代码的屏幕截图。石头应该放在“w1”方格上。但它不是..