Question

我正在尝试使用材质ui将一些盒子盒子放在reactjs中的图像上。这个想法是根据来自json文件的x，y位置放置盒子。一切都应该是动态的。因此，我为图像创建了一个组件，为盒子创建了另一个。

问题是我需要盒子属于照片组件。我的意思是盒子必须“塞在”照片上。这样，如果我在屏幕上移动照片，框就会紧随其后。以后，我将使用一个滑块，因此它们必须彼此属于。

Photo.js文件

 class Photo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            Data:DataPhoto
       }
    }

    render(){
        const {Data} = this.state; 
        return(
            <div>
                {
                    Data.map(data=>( 
                        <div>                          
                            <img key= {data.id} src={data.url} width={data.w} height={data.h} alt = "test"  className="image"/>
                        </div>      
                    ))
                }   
            </div>
        )
    }
}
export default Photo;

CadresBox。 js文件

class CadresBox extends Component{
    constructor(props){
        super(props);
        this.state = {
            Data:DataCadres
        }
    }

    render(){
        const {Data} = this.state;

        const inner = (
            <Box bgcolor="none" 
            m={1} 
            border={2} 
            style={{ width: '5rem', height: '5rem' }} 
            p={3}
            position="absolute"
            zIndex="tooltip"/>
          );

    return(
        <div>
            {
                Data.map(data=>(
                    <div>
                        <Grid>
                            <Box borderColor="primary.main" top= {data.y + 'px'} left = {data.x + 'px'}  className="box" clone>
                                 {inner}   
                            </Box>
                        </Grid>
                    </div>
                ))
            }
            <Photo/>
        </div>
        )
    }
}

export default CadresBox;

App.js文件

function App() {
  return (
    <div>
      <CadresBox/>
    </div>
  );
}

如果这是一个假问题，请提前对不起。我有点迷路了！

任何人都可以帮忙吗？非常感谢！

如何在Reactjs中将Material ui框粘贴到图像上

0 个答案: