![](/img/trans.png)
[英]React passing props to child component using TypeScript and React Router
[英]React router Passing props to a child component
這是提供 React Router 功能的 Apps 服務器 - 它按我的預期運行。
import React, { Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import NavTabs from "./components/NavTabs";
import Home from "./components/pages/Home";
import Search from "./components/pages/Search";
import Saved from "./components/pages/Saved";
import Contact from "./components/pages/Contact";
import API from "./utils/API";
class App extends Component {
// Setting our component's initial state
state = {
books: [],
title: "",
author: "",
synopsis: ""
};
// When the component mounts, load all books and save them to this.state.books
componentDidMount() {
this.loadBooks();
}
// Loads all books and sets them to this.state.books
loadBooks = () => {
API.getBooks()
.then(res =>
this.setState({ books: res.data, title: "", author: "", synopsis: "" })
)
.catch(err => console.log(err));
};
// Deletes a book from the database with a given id, then reloads books from the db
deleteBook = id => {
API.deleteBook(id)
.then(res => this.loadBooks())
.catch(err => console.log(err));
};
// Handles updating component state when the user types into the input field
handleInputChange = event => {
const { name, value } = event.target;
this.setState({
[name]: value
});
};
render() {
return (
<Router>
<div>
<NavTabs />
<Route exact path="/" component={Search} />
<Route exact path="/search" component={Search} />
<Route exact path="/saved" render={(props) => <Saved {...props} />} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}
}
export default App;
已保存的組件我也在嘗試傳遞道具。
import React from "react";
import { Col, Row, Container } from "../../components/Grid";
import { List, ListItem } from "../../components/List";
function Saved(props) {
return (
<div>
<h1>Saved</h1>
<Col size="md-6 sm-12">
{this.state.books.length ? (
<List>
{this.state.books.map(book => {
return (
<ListItem key={book._id}>
<a href={"/books/" + book._id}>
<strong>
{book.title} by {book.author}
</strong>
</a>
</ListItem>
);
})}
</List>
) : (
<h3>No Results to Display</h3>
)}
</Col>
</div>
);
}
export default Saved;
我得到的錯誤是
TypeError: Cannot read property 'state' of undefined
Saved
C:/class/googlebooks/googlebooks/client/src/components/pages/Saved.js:11
8 | return (
9 | <div>
10 | <h1>Saved</h1>
> 11 | <Col size="md-6 sm-12">
| ^ 12 | {this.state.books.length ? (
13 | <List>
14 | {this.state.books.map(book => {
任何幫助表示贊賞,這是上下文問題嗎? 我是新手,所以有些代碼很粗糙\\剪斷了。 我正在努力學習這個概念。
在主應用程序中,您希望將整個狀態作為 prop 傳遞給子組件,因此您可以這樣做:
<Route exact path="/saved" render={ () => <Saved data = { this.state } />} />
在子組件中,您將 props 作為參數訪問,然后從那里訪問數據對象(您剛剛在 route 處傳入了包含整個 state 的主組件)。
function Saved(props) {
return(
props.books.map(); // you have access at books array
)
}
function Saved ({ books }) {
// Use books array
}
應用內
...
<Route exact path="/saved" render={ () => <Saved {{ books: this.state.books }} /> } />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.