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}

来自docs：

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

Answer 2

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

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

return <div style={newStyle} />
}

通过在500和900的位置设置值，您可以在运行时为运行时期间元素的位置分配任何值。从而使大小动态化。

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

2 个答案: