九宫格拼图

九宫格拼图

import React, { Component } from 'react';
import './index.less';

class ViewData extends Component {

    render() { 
        // 重点是这个数组
        const data = [
            [0,0,0,0,0,0,0,0,0],
            [0,0,"./1.jpg","./1.jpg",0,"./1.jpg","./1.jpg",0,0],
            [0,"./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg",0],
            ["./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg"],
            ["./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg"],
            [0,"./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg",0],
            [0,0,"./1.jpg","./1.jpg","./1.jpg","./1.jpg","./1.jpg",0,0],
            [0,0,0,"./1.jpg","./1.jpg","./1.jpg",0,0,0],
            [0,0,0,0,"./1.jpg",0,0,0,0],
        ]
        return (
            <div>
                {
                    data.map((item,index)=>{
                        return <div className="div" key={index}> 
                            {
                                item.map((o,id)=>{
                                    return o === 0 ? <span key={id} className="span" style={{background:o === 1 ? "red" : "black"}}></span>
                                        : <img src={o} key={id} className="span"/>
                                })
                            }
                        </div>
                    })
                }
            </div>
        );
    }
}

export default ViewData;

index.less 文件

.span {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
}

.div {
  width: 450px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}