如何在 ReactJS 中动态改变元素的位置？

在本文中，我们将学习使用 ReactJS 动态更改元素的位置

方法：我们将使用以下步骤：

• 假设我们元素的位置在 x 坐标上为 0，在 y 坐标上为 0。
• 然后我们将根据我们移动的方向从 x/y 坐标中添加/减去一些值。
• 将所有这些值保持在状态中，以便我们可以实时看到变化
• 更新状态中的坐标，我们将看到元素的位置发生变化。

设置环境和执行：

• 第 1 步：创建 React App 命令

  npx create-react-app foldername

• 步骤2：创建项目文件夹后，即文件夹名称，使用以下命令移动到它：

  cd foldername

项目结构：它将如下所示。

App.js

import React, { Component } from "react";
  
class App extends Component {
  
  // Create state
  state = {
    xoffset: 0,
    yoffset: 0,
    delta: 10,
  };
   
  moveTitleToDown = () => {
    this.setState(
      { yoffset: this.state.yoffset 
        + this.state.delta });
  };
  moveTitleToRight = () => {
    this.setState(
      { xoffset: this.state.xoffset 
        + this.state.delta });
  };
  moveTitleToLeft = () => {
    this.setState(
      { xoffset: this.state.xoffset 
        - this.state.delta });
  };
  moveTitleToUp = () => {
    this.setState(
      { yoffset: this.state.yoffset 
        - this.state.delta });
  };
   
  render() {
    return (
      

        {/* Element to Move Dynamically */}
        

          GeeksforGeeks
        
   
        {/* Move Controls */}
        

          
            Move Title To Right
          
          
            Move Title To Down
          
          
            Move Title To Left
          
          
            Move Title To Up
          
        
      
    );
  }
}
   
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，单击按钮查看输出