javascript - 找不到在运行时更改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}

<小时/>

来自 docs :

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.