Передача функции и реквизита другому компоненту, но получение неопределенного - PullRequest
Новая
       26

Передача функции и реквизита другому компоненту, но получение неопределенного

0 голосов
/ 08 апреля 2020

Это просто грубый код, пытающийся убедиться, что данные отправляются между каждым компонентом, так что это я тестирую (файл: 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;

, что я пытаюсь сделать sh - это вернуть компонент, выбранный из панели навигации, используя обработчик для получения eventKey, который хранится в selectedKey после клика в данный момент пытался сделать это для страницы отчета.

Ответы [ 2 ]

0 голосов
/ 09 апреля 2020

Вы можете передать 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>
    )
  }
}
0 голосов
/ 08 апреля 2020

Если вы хотите визуализировать на основе выбранных значений страницы, вы можете сделать эту логику отображения c, просто получите текущий путь через 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);
 }
}
...