1

我是 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>
);

}

非常感谢您

4

1 回答 1

0

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

于 2021-04-26T18:32:05.837 回答