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

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)}
                        column 2
                    </Col>
                </Row>
            </Container>

        )
    }

}

export default Layout;

我试图完成的是通过使用处理程序返回从导航中选择的组件，以获取单击后存储在 selectedKey 中的 eventKey，当前正在尝试为报告页面执行此操作。

Answer 1

您可以将 JSX 作为子组件传递，然后在需要的地方使用它们，为什么不在父组件本身中调用该函数呢？

试试这个：

const Navbar = () => {

  const handler = (x) => {
    if (x == 1) {
      return <Reports></Reports>
    }
  }
  return (
    <Nav defaultActiveKey="/" className="flex-column" onSelect={(selectedKey) => <Layout >{handler(selectedKey)}</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>

  )
}

class Layout extends Component {

  render() {
    return (
      <Container fluid>
        <Row>
          <Col xs={3}>
            <Navbar>
            </Navbar>
          </Col>
          <Col>
           {this.props.children}
          </Col>
        </Row>
      </Container>
    )
  }
}

Answer 2

如果您想根据选定的页面值进行渲染，您可以执行此显示逻辑，只需通过 window.location.pathname 获取当前路径，因为 href 会将您的 url 更改为该路径，并且根据路径值渲染各个组件

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

希望这会有所帮助！

更新： 尝试将您的函数绑定到这样的类

const Navbar =() =>{
 constructor(props){
 super(props);
 this.handler = this.handler.bind(this);
 }
}