如何添加动态div，响应js

Question

我尝试从一个包含9个数组的对象创建多个潜水，每个数组包含不同的坐标，我的目标是为每个数组创建一个div，并根据它们的坐标在屏幕上显示它们。

我就是这样做的：

class Boxes extends Component {

  createBox = (box) => {
    if(box !== undefined) {
      console.log('box :', box);
      return <div className='bounding-box'> <h1>Test</h1></div>
    }
  }

  createBoxes = (boxes) => {
    for (let index = 0; index < boxes.length; index++) {
      let box = {
        x1: boxes[index].x1,
        y1: boxes[index].y1,
        x2: boxes[index].x2,
        y2:boxes[index].y2
      }
      this.createBox(box);   
    }      
  }

  render() { 
    return (     
      <div>
          {this.createBox(this.createBoxes(this.props.box))}
      </div>
    );
  }
}

export default Boxes;

变量this.props.box包含带有数组的对象。

我所做的就是遍历这个对象，并将每个数组发送到一个函数，该函数将为它创建一个div，但它并不使我成为任何div。

我很乐意明白我的错误在哪里，我做错了什么？

谢谢

Answer 1

我为同样的问题创造了一个解决方案。希望这能有所帮助。检查这个CodeSandbox