如何在运行时修改React fixed定位元素的位置？

嘿，我一眼就看出你踩了个典型的React误区——你直接修改的那个t是虚拟DOM的描述对象，不是浏览器里真实的DOM元素，所以给它加top、left属性完全不会生效，React根本不认这种操作😅。

下面给你几种靠谱的实现方式，按需选择：

1. 直接用内联样式（静态位置） #

如果你的位置是固定的，或者可以提前计算好，直接把样式对象传给元素的style属性就行：

render() {
  // 定义样式对象，React的style属性接受驼峰式键名（top/left这类单单词无需修改）
  const elementStyles = {
    top: '500px',
    left: '900px',
    // 如果你的className里没包含position: fixed，这里也可以直接加上
    position: 'fixed'
  };
  return <div className="myElement" style={elementStyles} />;
}

2. 用状态控制（动态更新位置） #

如果需要在运行时动态改变位置（比如用户点击按钮后移动），用React的状态来管理样式是最符合React理念的方式：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始位置存在state里
    this.state = {
      elementPos: {
        top: '500px',
        left: '900px'
      }
    };
  }

  // 举个例子：点击按钮修改位置
  moveElement = () => {
    this.setState({
      elementPos: {
        top: '300px',
        left: '600px'
      }
    });
  };

  render() {
    return (
      <div>
        <div className="myElement" style={this.state.elementPos} />
        <button onClick={this.moveElement}>移动元素</button>
      </div>
    );
  }
}

当你调用setState更新位置时，组件会自动重新渲染，元素的位置也就跟着同步变化了。

3. 操作真实DOM（仅特殊场景使用） #

如果因为某些特殊原因必须直接操作真实DOM（非常不推荐，除非万不得已），可以用React的ref来获取真实元素：

class MyComponent extends React.Component {
  // 创建一个ref用来引用真实DOM元素
  elementRef = React.createRef();

  componentDidMount() {
    // 组件挂载完成后，真实DOM已经存在，这时可以修改样式
    if (this.elementRef.current) {
      this.elementRef.current.style.top = '500px';
      this.elementRef.current.style.left = '900px';
    }
  }

  render() {
    return <div className="myElement" ref={this.elementRef} />;
  }
}

再次提醒：这种方式尽量少用，因为会绕过React的虚拟DOM管理，容易出现状态和UI不一致的问题。

总结一下 #

你之前的错误在于把虚拟DOM对象当成了真实DOM元素来操作，React里动态设置样式的正确姿势是通过style属性结合状态，或者必要时用ref操作真实DOM。

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