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

希望这会有所帮助！

已更新： 尝试将您的函数绑定到此类

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

Answer 2

您可以将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>
    )
  }
}

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

2 个答案: