[英]How to change the position of the element dynamically in ReactJs?
I am using ReactJs. 我正在使用ReactJs。 I want to change a position of the image dynamically.
我想动态更改图像的位置。
I am trying to set up style like described here : 我试图建立风格像描述在这里 :
My sprite.js: 我的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')
)
My css contains: 我的CSS包含:
#bird {
background:url('../res/bird.png');
background-repeat: no-repeat;
}
I see the image, but style={{padding:padding, left: left, top:top}}
does not applied. 我看到了图像,但是没有应用
style={{padding:padding, left: left, top:top}}
。
If I look to the source code in Chrome, I see the style padding:5000px, left:5000px, top:5000px
. 如果我查看Chrome中的源代码,
padding:5000px, left:5000px, top:5000px
看到padding:5000px, left:5000px, top:5000px
。 But my image is in the left top corner. 但是我的图片在左上角。
How can I dinamically change the position of the div element (image in my case) in ReactJs? 如何在ReactJs中动态更改div元素(在我的情况下为image)的位置?
Try like this.You have not included position:absolute 像这样尝试。您尚未包含位置:绝对
class Sprite extends React.Component {
render() {
var left = 5000 + 'px';
var top = 5000 + 'px';
var padding = 5000 + 'px';
return (
<div id="bird" style={{padding, left, top,position:'absolute'}}/>
)
}
}
要在左侧和顶部播放这样的位置
<div id="bird" style={{position: 'relative', padding, left, top}}/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.