找不到在运行时更改reactjs元素位置的方法

Question

我写了一些react.component并且定义了固定位置。
我需要在运行时移动此元素位置，

 render(){
    var t = <div className="myElement" />;
    t.top = '${500}px';
    t.left = '${900}px';

     return t;     // the element position need to be now 500, 900 
 }

Answer 1

似乎您只需要通过一些内联CSS规则即可：

render(){
  const s = {top: '500px', left: '900px'};
  return (
    <div className="myElement" style={s} />
  );
}

或者，更紧凑的版本：

render(){
  return (
    <div className="myElement" style={{top: '500px', left: '900px'}} />
  );
}

如果缺少单位，React将自动px 。 因此，您也可以执行以下操作： {top: 500, left: 900}

---

从文档 ：

样式属性接受带有camelCased属性的JavaScript对象，而不是CSS字符串。 这与DOM样式的JavaScript属性一致，效率更高，并且可以防止XSS安全漏洞。

Answer 2

为此，您可以尝试以下方法，

render(){
let newStyle={
  top:500,
  left:900,
  position:"fixed",
}

return <div style={newStyle} />
}

在此处，可以通过在值500和900处设置值，在运行时为元素的位置分配任何值。这样就可以动态调整大小。