Question

我是新手，我正在尝试在我的测试页面中使用道具。一旦我使用{this.props.children}，所有内容仍然被替换，而不是在儿童宣言中显示。

如何使用props.children显示页面？

的src / app.js

import React from 'react';
import ReactDOM from 'react-dom';
import { IndexRoute, Switch, BrowserRouter as Router, Route, hashHistory } from 'react-router-dom';

import App from './pages/App';
import Cursos from './pages/Cursos';
import Sobre from './pages/Sobre';
import Home from './pages/Home';


ReactDOM.render((
  <Router history = { hashHistory } >
    <Switch>
      <Route exact path="/" component={App} />
      <Route path="/cursos" component={ Cursos } />
      <Route path="/sobre" component={ Sobre } />
      <Route component={ Home } />
    </Switch>
  </Router>
  ),
      document.getElementById("app")
  );

公开/ index.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V++ React Series</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
</head>
<body>
    <div id ="app"></div>
    <script src="/js/app.min.js"></script>
</body>
</html>

的src /页/ App.js

import React from 'react';
import { NavLink } from 'react-router-dom';

export default class App extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <nav className="nav has-shadow">
                    <div className="nav-left">
                        <NavLink to="/home" className="nav-item is-tab">Home  </NavLink>
                        <NavLink to="/cursos" className="nav-item is-tab" activeClassName="is-active">Cursos  </NavLink>
                        <NavLink to="/sobre" className="nav-item  is-tab" activeClassName="is-active">Sobre  </NavLink>
                    </div>
                </nav>
                <section className="section">
                    <div className="container">
                        {this.props.children}
                    </div>
                </section>
            </div>
        );
    }
}

的src /页/ Cursos.js

import React from 'react';

export default class Cursos extends React.Component {
    constructor() {
        super();
    }

    render() {
        return <h1 className="title">Conheça nossos cursos</h1>
    }
}

Answer 1

根据我的判断，您希望Navbar显示在所有页面上，<Cursos />组件应显示在<App />内的容器中，以使用{{1}执行此操作您可以将路由器更改为：

{this.props.children}

请记住，这也会以同样的方式显示<Router history = { hashHistory } > <Switch> <App> <Route path="/cursos" component={ Cursos } /> <Route path="/sobre" component={ Sobre } /> <Route component={ Home } /> </App> </Switch> </Router>和<Sobre />。

如何在{this.props.children}中使用React-router

1 个答案: