Javascript 获取未定义的Props参数值（ReactJS）

我在其中一个组件中有一个属性，当我试图通过道具访问该属性时，它的值是未定义的

下面是我使用组件并传递所需属性的一段代码。

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;

import React，{Component}来自“React”；
从“/pages/pages not found”导入PageNotFound；
从“react router dom”导入{BrowserRouter，Switch，Route}；
从“/pages/books section”导入BookSectionPage；
从“/pages/book details”导入书籍详细信息；
类应用程序扩展组件{
render（）{
返回(
{
return//这是组件
}} />
);
}
}
导出默认应用程序；

下面是组件的代码，我试图通过道具访问上述属性，但其值未定义。

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;

从“React”导入React；
从“./组件/标题/标题”导入标题；
从“./components/Footer/Footer”导入页脚；
从“./components/books节/books节”导入BookSectionComponent；
常量页面=（道具）=>{
让书本=[1,2,3,4,5,6]；
console.log（Props.title）；//这里不是打印属性的值，而是显示未定义。
返回(
);
};
导出默认页面；

---

任何帮助都将不胜感激。谢谢

使用道具从父母到孩子

App
└── Parent
    ├── Child1

React和basic示例中最简单的数据流方向

父组件

类父级扩展React.Component{
状态={title:“JavaScript”}
render（）{
返回(
);
}
}

子组件 类Child1扩展了React.Component{ render（）{ 返回( 来自父级的数据是：{this.props.datafrompent} ); } }

---

试试这个。Const title={name:“sometitle”}，然后在哪个阶段将prop

title

传递给

BookSectionPage

？@LogeshP尝试了一下，不幸的是，没有成功。@DennisVash我上面给出的第一段代码就是我将属性传递给组件的地方（我写了一些注释供参考）第二段代码是我试图通过道具访问属性的组件的代码