背景图像隐藏了reactjs中的工具栏

Question

你好，我想建立一个工具栏，在背景中有一个图像。我构建了两个不同的组件。第一个是图像组件:

import React from 'react';
import thepic from '../mypic.jpg'; // with import
import '../App.css';
const Image = () => {
return (
<img src={thepic} className='the-pic' />
)
}
export default Image;

第二个组件是工具栏，我使用的是react-bootstrap工具栏，并且我将前一个组件包装在工具栏中:

<Image>
<Navbar>
<Container>
<Navbar.Brand href="#home">
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">
Home
</Nav.Link>
<Nav.Link href="#link">
Link
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</Image>

我已经设法在屏幕上显示图像，但工具栏没有显示出来。就像图像覆盖了工具栏。
有人能帮忙吗?

Answer 1

这种方法是错误的，你不应该为背景图像创建一个组件，并将其用作"插槽";对于其他组件。你能做的就是给导航栏组件一个背景图像作为prop，这样它就会是动态的。