React中如何通过点击按钮动态移动页面元素？

核心问题 #

你代码里有两个关键错误：

1. style属性赋值错误：bottom: {movepos} 写法不对，React的style对象中属性值直接传变量即可，额外加的大括号会让实际传递的是嵌套对象而非字符串值，导致浏览器解析样式出错，元素位置异常。
2. boxShadow格式错误：你写了boxShadow: "box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px"，这里多了box-shadow:前缀，React的驼峰式样式属性不需要这个前缀，直接写阴影值即可。

修正后的代码 #

import { useState } from 'react';

function YourComponent() {
    const [movepos, setMovepos] = useState("0")

    return (
        <>
        <div style={{
            position: "absolute",
            width: "100%",
            height: "60px",
            bottom: movepos, // 移除多余大括号
            zIndex: 10000000000, // zIndex为数字类型，无需引号
            boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px", // 移除box-shadow前缀
            backgroundColor: "white"
            }} className="media-player-bar"></div>
        <button onClick={() => setMovepos(movepos === "0" ? "-60px" : "0")} className="test-button">Click me</button>
        </>
    )
}

更推荐的实现方式 #

用className切换控制样式，代码更清晰且便于维护，还能轻松添加过渡动画：

1. 先定义CSS类：

.media-player-bar {
    position: absolute;
    width: 100%;
    height: 60px;
    bottom: 0;
    z-index: 10000000000;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background-color: white;
    transition: bottom 0.3s ease; /* 添加过渡动画提升体验 */
}

.media-player-bar.hidden {
    bottom: -60px;
}

2. React组件代码：

import { useState } from 'react';

function YourComponent() {
    const [isHidden, setIsHidden] = useState(false)

    return (
        <>
        <div className={`media-player-bar ${isHidden ? 'hidden' : ''}`}></div>
        <button onClick={() => setIsHidden(!isHidden)} className="test-button">Click me</button>
        </>
    )
}

内容的提问来源于stack exchange，提问作者Anon