Question

我正在尝试使用某些组件开发reactjs应用程序。＆＃39; App.jsx＆＃39;有导航栏。我希望导航栏应该位于所有子组件的前面。当我尝试使用边距时，它无法正常工作。请帮我。谢谢。我在这里有代码。

App.jsx：

import React from 'react';
import { Route, NavLink, HashRouter } from "react-router-dom";
import Home from './pages/Home.jsx';
import Stuff from './pages/Stuff.jsx';
import Content from './pages/Contact.jsx';

class App extends React.Component {
 render() {
  return (
    <HashRouter>
        <div>
            <ul className="header navigation" >
                <li><NavLink exact to="/">Home</NavLink></li>
                <li><NavLink to="/stuff">Stuff</NavLink></li>
                <li><NavLink to="/contact">Contact</NavLink></li>
            </ul> 
            <div className="content">
                <Route exact path="/" component={Home} />                  
                <Route path="/stuff" component={Stuff} />
                <Route path="/contact" component={Contact} />            
            </div>                               
        </div>            
    </HashRouter>
  );
 }
}

export default App;

Home.jsx：

import React, { Component } from 'react';    

class Home extends Component{

    render(){
        return(
            <div style={{ height:'100%', width:'100%', marginTop:-150 }}>
                <img src="./images/la.jpg" alt="Los Angeles" style={{ width:'100%' }} />
            </div>
        );
    }
}

export default Home;

默认情况下，所有子组件都显示在App组件的顶部。

Answer 1

你的头后面会显示你的头，因为他在其他人面前宣布了。

您可以使用z-index属性，如下所示：

.header {
  z-index: 1;
}

我不确定你想要实现的目标，但也许做这样的事情会更好：

.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0
}

PS： width:'100%'中的{{ height:'100%', width:'100%', marginTop:-150 }}规则无用。默认情况下，<div>显示为块。这意味着他将占据整个宽度。

应用程序组件应放在reactjs中的所有组件之上

1 个答案: