Question

我正在使用ReactJs。我想动态地改变图像的位置。

我正在尝试设置类似here描述的样式：

我的sprite.js：

'use strict';
import '../res/my_css.css'

const React = require('react');
const ReactDOM = require('react-dom');

class Sprite extends React.Component {
  render() {
    var left = 5000 + 'px';
    var top = 5000 + 'px';
    var padding = 5000 + 'px';
    return (
        <div id="bird" style={{padding:padding, left: left, top:top}}/>
    )
  }
}

export default Sprite;
ReactDOM.render(
  <Sprite />,
  document.getElementById('sprite')
)

我的css包含：

#bird {
  background:url('../res/bird.png');
  background-repeat: no-repeat;
}

我看到图片，但style={{padding:padding, left: left, top:top}}未应用。

如果我查看Chrome中的源代码，我会看到样式padding:5000px, left:5000px, top:5000px。但我的图像位于左上角。

如何在ReactJs中以动态方式改变div元素的位置（在我的情况下为图像）？

Answer 1

试试这样。你没有包括位置：绝对

class Sprite extends React.Component {
      render() {
        var left = 5000 + 'px';
        var top = 5000 + 'px';
        var padding = 5000 + 'px';
        return (
            <div id="bird" style={{padding:padding, left: left, top:top,position:'absolute'}}/>
        )
  }
}

Answer 2

使用左侧和顶部添加位置

<div id="bird" style={{position: 'relative', padding, left, top}}/>

如何在ReactJs中动态更改元素的位置？

2 个答案: