Question

我正在学习React，但遇到了问题。可能很简单，但我无法解决此问题。

应用程序组件

import React, { Component } from 'react';
import './App.css';
import Navbar from './Components/Navbar/Navbar';
import SideMenu from './Components/SideMenu/SideMenu';
import Breadcrumbs from './Components/Breadcrumbs/Breadcrumbs';

class App extends Component {
    render() {
        return (
            <div>
                <Navbar />

                <div className="container-fluid">
                    <div className="row">
                        <SideMenu />

                        <main role="main" className="px-4">
                            <Breadcrumbs nome="José" />
                        </main>
                    </div>
                </div>
            </div>
        );
    }
}
export default App;

导航栏组件

import React from 'react';

const navbar = (props) => {
    return (
        <nav className="navbar navbar-dark p-0 shadow">
            <a className="mr-0" href="#">{ props.nome }</a>
                { 
                    console.log(props)
                }
            <ul className="navbar-nav px-3">
                <li className="nav-item text-nowrap">
                    <a className="nav-link" href="#">Sign out</a>
                </li>
            </ul>
        </nav>
    )
};

export default navbar;

在控制台上，我的道具等于{}，props.name也等于。控制台中没有错误。

我不知道自己在做什么错。有帮助吗？

Answer 1

正如@zerkms所说，我没有将道具传递给导航栏。完全是我的关注。

对不起，谢谢您的帮助。

Answer 2

<Navbar {...this.props} />

请将其添加到App类中的代码中。

反应子组件的道具总是空的

2 个答案: