Javascript 如何与{this.props.children}一起使用React路由器_Javascript_Reactjs

Javascript 如何与{this.props.children}一起使用React路由器

javascript reactjs

Javascript 如何与{this.props.children}一起使用React路由器,javascript,reactjs,Javascript,Reactjs,我是react的新手，我尝试在我的测试页面中使用道具。一旦我使用了{this.props.children}，所有内容仍然被替换，而不是显示在children声明中如何使用props.children显示页面 src/app.js public/index.html src/Pages/App.js src/Pages/Cursos.js 从我所能确定的情况来看，您希望导航栏显示在所有页面上，并且组件应显示在内部容器中，以便使用{this.props.children}执行此操作。您可以将路由

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

如何使用props.children显示页面

src/app.js

public/index.html

src/Pages/App.js

src/Pages/Cursos.js

从我所能确定的情况来看，您希望导航栏显示在所有页面上，并且组件应显示在内部容器中，以便使用{this.props.children}执行此操作。您可以将路由器更改为如下所示：

  <Router history = { hashHistory } >
    <Switch>
      <App>
        <Route path="/cursos" component={ Cursos } />
        <Route path="/sobre" component={ Sobre } />
        <Route component={ Home } />
      </App>
    </Switch>
  </Router>

请记住，这也将以相同的方式显示

在你的例子中，这是什么.props.children？它应该在导航链接下显示页面光标。嘿，我在使用props.children时遇到了问题。你的回答帮助我更接近于让我的应用程序工作。只是现在它告诉我“道具”没有定义。你知道这可能是什么吗？

<!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>

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>
        );
    }
}

import React from 'react';

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

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

  <Router history = { hashHistory } >
    <Switch>
      <App>
        <Route path="/cursos" component={ Cursos } />
        <Route path="/sobre" component={ Sobre } />
        <Route component={ Home } />
      </App>
    </Switch>
  </Router>