Получение значения параметра Props как неопределенного (ReactJS) - PullRequest
Новая
       11

Получение значения параметра Props как неопределенного (ReactJS)

0 голосов
/ 01 марта 2020

У меня есть атрибут в одном из компонентов, и когда я пытаюсь получить доступ к этому атрибуту через реквизит, я получаю его значение как неопределенное.

Ниже приведен фрагмент код, где я использую компонент и передаю обязательный атрибут. 

import React, { Component } from "react";
import PageNotFound from "./pages/page-not-found";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import BookSectionPage from "./pages/books-section";
import BookDetails from "./pages/book-details";

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <Switch>
            <Route path="/" exact component={BookSectionPage}/>
            <Route path="/book/category/:categoryName" exact render = { (props) => {
              return <BookSectionPage title = "JavaScript" /> // This is the component
            }} />
            <Route path="/book/:bookID" exact component={BookDetails} />
            <Route component={PageNotFound} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

Ниже приведен код компонента, к которому я пытаюсь получить доступ к вышеупомянутому атрибуту. через реквизит, но получая его значение как неопределенное. 

import React from "react";
import Header from "../components/header/header";
import Footer from "../components/Footer/footer";
import BookSectionComponent from "../components/books-section/books-section";

const BookSectionPage = (Props) => {
  let books=[1,2,3,4,5,6];
  console.log(Props.title);     // Here instead of printing the value of attribute, it's showing undefined. 
  return (
    <div className="has-fixed-footer">
      <Header />
      <BookSectionComponent title = {Props.title} books = {books} />
      <Footer />
    </div>
  );
};

export default BookSectionPage;

Любая помощь будет принята с благодарностью. Спасибо!

1 Ответ

0 голосов
/ 01 марта 2020

От родителя к ребенку с помощью реквизита 

App
└── Parent
    ├── Child1

Самое простое направление потока данных в примере React и basi c.

Родительский компонент 

class Parent extends React.Component {
state = { title : "JavaScript" } 
render() {

        return (
            <div>           
                 <Child1 dataFromParent = {this.state.title} />
            </div>
        );
    }
}

Дочерний компонент 

class Child1 extends React.Component {
render() {

        return (
            <div>
                The data from parent is:{this.props.dataFromParent}
            </div>
        );
    }
}
...