Пропустите props между компонентами на одном уровне React js с помощью крючков - PullRequest
Новая
       1

Пропустите props между компонентами на одном уровне React js с помощью крючков

0 голосов
/ 11 июля 2020

Я пытаюсь создать простое приложение, которое извлекает книги из API книг Google. У меня есть компонент Body с панелью поиска, который отображает компонент BookDisplay, который отображает массив книг в BookCard s. На каждой карточке есть кнопка Learn More, которая должна открывать модальное окно со всей информацией о книге, и здесь я застреваю. Как передать информацию о книге компоненту BookModal? Вот пример моего настоящего класса BookDisplay 

import style from './booksdisplay.module.css'
import BookCard from "../BookCard/BookCard";
import BookModal from "../BookModal/BookModal";

function BooksDisplay(props) {

    const books=props.books
    if(books.length===0){
        return(
            <div>{props.message}</div>
        )
    }
    else{
        return (

            <div className='Books'>
                <div>{props.message}</div>
                {
                    books.map(book=>{
                        return (

                            <BookCard data={book.volumeInfo}/>

                        )
                    })

                }
                <BookModal/>
            </div>
        )
    }
}

export default BooksDisplay

Вот мой класс BookCard 

import {Button, Card, CardBody, CardHeader, CardImg, CardSubtitle, CardTitle} from "shards-react";

const BookCard=(props)=> {

    function normalizeAuthors(arr) {
        if(!arr)
        {
            arr=['no authors']
        }
        return arr;
    }
    return(
        <Card  style={{maxWidth:'300px'}}>
            <CardHeader>
                <CardTitle>{props.data.title}</CardTitle>
                <CardSubtitle>{normalizeAuthors(props.data.authors)}</CardSubtitle>
            </CardHeader>
            <CardBody>
                <CardImg src={props.data.imageLinks}/>
                <Button outline >Learn More</Button>
            </CardBody>
        </Card>
    )
}

export default BookCard

1 Ответ

1 голос
/ 11 июля 2020

Вам просто нужно сообщить родителю, что нажата кнопка «Узнать больше».

Например: 

function BooksDisplay(props) {
  const [selectedbook, setSelectedBook] = React.useState();

  const handleClick = (book) => {
    // save this book in the state
    setSelectedBook(book);
  };

  const books = props.books;
  if (books.length === 0) {
    return <div>{props.message}</div>;
  } else {
    return (
      <div className="Books">
        <div>{props.message}</div>
        {books.map((book) => {
          return (
            <BookCard
              clicked={() => handleClick(book)}
              data={book.volumeInfo}
            />
          );
        })}
        // In the `BookModal` component you can use the `bookData` prop.
        <BookModal bookData={selectedbook} />
      </div>
    );
  }
}

и в компоненте BookCard: 

const BookCard = (props) => {
  function normalizeAuthors(arr) {
    if (!arr) {
      arr = ["no authors"];
    }
    return arr;
  }
  return (
    <Card style={{ maxWidth: "300px" }}>
      <CardHeader>
        <CardTitle>{props.data.title}</CardTitle>
        <CardSubtitle>{normalizeAuthors(props.data.authors)}</CardSubtitle>
      </CardHeader>
      <CardBody>
        <CardImg src={props.data.imageLinks} />
        <Button outline onClick={props.clicked}>
          Learn More
        </Button>
      </CardBody>
    </Card>
  );
};
...