将函数和prop传递给另一个组件，但未定义

Question

这只是粗略的代码，试图确保数据在每个组件之间发送，因此我正在测试（文件：navbar.js）

import React from 'react';
import {Nav,} from 'react-bootstrap';
import styles from 'styled-components';
import Layout from './layout';
import Reports from './reports';



const Navbar =() =>{

    function handler(x){

        if (x==1){
            return <Reports></Reports>
        }
    }
    return(

    <Nav defaultActiveKey="/" className="flex-column" onSelect={(selectedKey) => <Layout page={selectedKey} func={handler}></Layout>}>
        <Nav.Link href="/">Home</Nav.Link>
        <Nav.Link href="/Orders">Orders</Nav.Link>
        <Nav.Link href="/Users">Users</Nav.Link>
        <Nav.Link eventKey='1' href="/Reports">Reports</Nav.Link>
    </Nav>

    )

}

export default Navbar;

现在尝试访问道具时，布局类出现问题（文件：layout.js）

import React, { Component } from 'react';
import {Nav, Col , Row, Container} from 'react-bootstrap';
import styles from 'styled-components';
import Navbar from './navbar';



class Layout extends Component{

    render(){

        return(
            <Container fluid>
                <Row>
                    <Col xs={3}>
                    <Navbar>
                    </Navbar>

                    </Col>
                    <Col>
                        {this.props.func(this.props.page)}
                        colomn 2
                    </Col>
                </Row>
            </Container>

        )
    }

}

export default Layout;

[要做的是通过使用处理程序以获取事件密钥来返回从导航中选择的组件，该事件密钥是单击后存储在selectedKey中的，当前正试图在报告页面中使用它。

Answer 1

如果要基于选定的页面值进行渲染，则可以执行此显示逻辑，只需通过window.location.pathname获取当前路径，因为href会将其更改为该路径并渲染该组件

        function handler(){

        const page = window.location.pathname; // this will return current page path

        if (page==="/")
          return (<HomePage/>)
        else if (page === "/Orders")
          return(<Orders/>)
        else if (page === "/Reports")
          return (<Reports/>)
  }

希望这会有所帮助！