将元素放置在区域标签位置

Question

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

我已经尝试了这段代码，但是似乎没有用。.

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”正方形上。但这不是..