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

我编写了一些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 
 }

render（）{
var t=；
t、 top='${500}px'；
t、 左=“${900}px”；
返回t；//元素位置现在需要为500900
}

似乎您只需要传递一些内联css规则：

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

render（）{
常数s={top:'500px'，left:'900px'}；
返回(
);
}

或者，更紧凑的版本：

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

render（）{
返回(
);
}

如果装置缺失，React将自动

px

。所以你也可以这样做：

{top:500，left:900}

---

从：

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

---

似乎您只需要传递一些内联css规则：

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

render（）{
常数s={top:'500px'，left:'900px'}；
返回(
);
}

或者，更紧凑的版本：

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

render（）{
返回(
);
}

如果装置缺失，React将自动

px

。所以你也可以这样做：

{top:500，left:900}

---

从：

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

---

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

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

return <div style={newStyle} />
}

render（）{
让新闻风格={
前500名，
左：900，
位置：“固定”，
}
返回
}

---

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

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

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

return <div style={newStyle} />
}

render（）{
让新闻风格={
前500名，
左：900，
位置：“固定”，
}
返回
}

---

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

您想将这些css属性传递到

render（）上的
div
？是的。。。我必须将元素位置移动到屏幕上的特定位置。我想您可能会混淆用
jsx
编写的元素和DOM元素。这是两件完全不同的事情。它们没有诸如
top
或
left
之类的属性。要将样式应用于组件，可以使用@Chris answer中解释的
样式
道具。要将这些css属性传递到
render（）
上的
div
？是。。。我必须将元素位置移动到屏幕上的特定位置。我想您可能会混淆用
jsx
编写的元素和DOM元素。这是两件完全不同的事情。它们没有诸如
top
或
left
之类的属性。要将样式应用于组件，可以使用@Chris answer中解释的
样式
道具。500和900是动态的吗？我在一些事件（鼠标）侦听器上获取它们-如何更新它以在渲染中获取它们？使用
设置状态
将它们保存到状态。例如
this.setState（{top:e.clientY，left:e.clientX}）（用于鼠标位置）。然后在您的
div
中使用：
style={{{top:this.state.top，left:this.state.left}
是500，900是动态的-我在一些事件（鼠标）列表器上获得它们-如何更新它以在渲染中获得它们？使用
setState
将它们保存到状态。例如
this.setState（{top:e.clientY，left:e.clientX}）（用于鼠标位置）。然后在
div中使用：
style={{{top:this.state.top，left:this.state.left}