反应网格布局。网格项值的动态更新

Question

我是 react 新手，我想尝试使用 react-grid-layout。

我想了解是否可以在项目上显示布局的“x”值，以便我可以看到 x 坐标随着鼠标的移动而变化。显然每个项目都必须有自己的“x”坐标值..但我就是不知道该怎么做。我确信有一个简单的方法，但我看不到它。

这是我的代码

https://codesandbox.io/s/react-grid-layout-componet-isy1w?file=/src/App.js

这里的函数：el.x 它不会随着布局的变化而更新

createElement(el) {
const removeStyle = {
  position: "absolute",
  right: "2px",
  top: 0,
  cursor: "pointer"
};
const i = el.i;
/* const index=i.slice(1);
console.log(index) */

console.log();
return (
  <div className="wrapper" key={i} data-grid={el}>
    <p>
      <span className="text">
        {el.i} + **{el.x}**
      </span>
    </p>
    <p>
      <span className="text"></span>
    </p>
    <span
      className="remove"
      style={removeStyle}
      onClick={this.onRemoveItem.bind(this, i)}
    >
      x
    </span>
  </div>
);

}

非常感谢

Answer 1

你应该去创建 AppContainer 然后 CardContainers 嵌套各自的功能。并使用外部库对它们进行样式设置...我建议使用styled-components，非常易于使用，并且可以更好地设计应用程序布局，而不是从头开始创建。正如我在我的项目中使用的那样。我希望这会帮助你。 git repo https://github.com/faisalnazik/Django-REST-framework-React.JS-Typescript.git