0

Подскажите, как передавать props в потомка после метода map ? Вот простой пример

const booksDescription = [
  {
    id: 1,
    bookName: "Понедельник начинается в субботу",
    bookInSection: 1,
    authorNumber: 1
  },
  {
    id: 2,
    bookName: "Гарри Поттер и Орден Феникса",
    bookInSection: 6,
    authorNumber: 3
  },
  {
    id: 3,
    bookName: "Сказание о трех свинах",
    bookInSection: 1,
    authorNumber: 4
  }
];

const booksAuthor = [
  {
    id: 1,
    authorName: "Борис",
    authorSurname: "Стругацкий"
  },
  {
    id: 2,
    authorName: "Аркадий",
    authorSurname: "Стругацкий"
  },
  {
    id: 3,
    authorName: "Джоан",
    authorSurname: "Роулинг"
  },
  {
    id: 4,
    authorName: "Джон",
    authorSurname: "Толкиен"
  }
];

function WorkSpace(props) {
  let Books = booksDescription.map((el) => (
    <BookItem
      id={el.id}
      key={el.id}
      bookName={el.bookName}
      authorNumber={el.authorNumber}
    />
  ));

  return (
    <main className={"main"}>
      <div id="FullListBook" className="BooksAll ">
        {Books}
      </div>
    </main>
  );
}

class BookItem extends React.Component {
  render() {
    const book = this.props;
    const authorsOfBookNumber = book.authorNumber - 1;

    const authorOfBookName = booksAuthor[authorsOfBookNumber].authorName;
    const authorOfBookSurname = booksAuthor[authorsOfBookNumber].authorSurname;

    const authorsOfBookFull = authorOfBookSurname + " " + authorOfBookName;

    return (
      <div className="bl_book__item">
        <a className="bl_book__link" href="#">
          <BookImg/>
          <p className="bl_book__name">
            <p className="bl_book__title">{book.bookName}</p>
            <p className="bl_book__author">{authorsOfBookFull}</p>
          </p>
        </a>
      </div>
    );
  }
}

function BookImg(){
  
  return (
    <div class="book_picture">
      <span>Книга по счету №</span>
      <img src="image.png" alt="Author + Book name"/>
    </div>
  )
  
}

function App() {
  return <WorkSpace />;
}

ReactDOM.render(<App />, document.getElementById("root"));
.bl_book__item {
  display: inline-block;
  width: 150px;
  height: 200px;
  max-resolution: 40px;
  vertical-align: top;
  margin-right: 10px;
  border: 1px solid #000;
}

article {
  padding: 10px;
  border: 1px solid #f00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Вопрос - как в компонент BookImg передать значения bookInSection (для Книга по счету №) и значение alt которое по идеии должно состоять из текущего значения названия книги и её автора ?

1 ответ 1

1

Для alt просто отдаете в <BookImg/> параметры, а в function BookImg(props) их принимаете. Пример использования

//~~~~~
const authorsOfBookFull = authorOfBookSurname + " " + authorOfBookName;
<BookImg bookDescription={authorsOfBookFull}/>
//~~~~~
function BookImg(props){
  const { bookDescription } = props;
  return (
    <div class="book_picture">
      <img src="image.png" alt={bookDescription}/>
    </div>
  )
  
}

Аналогично bookInSection передаете в

<BookItem
  id={el.id}
  key={el.id}
  bookName={el.bookName}
  authorNumber={el.authorNumber}
  bookInSection={el.bookInSection}
/>

И следует сделать такой же проброс до <BookImg/>

function BookImg(props){
  const { bookDescription, bookInSection } = props;
  return (
    <div class="book_picture">
      <span>`Книга по счету № ${bookInSection}`</span>
      <img src="image.png" alt={bookDescription}/>
    </div>
  )
  
}

1
  • Спасибо помогло, а вот у меня вопрос, ещё возник. А если необходимо провести проверку,. что если книга по счету >1. То надо прописывать строку с указанием номера книги, иначе - не надо. Как это реализовать ? Я пробую в BookImg создавть функцию проверки по типу function bookNumber(props) { if(seriesNumber > 1){ return '<span className="ribbon volume">Книга № {seriesNumber}' } а потом подставить результат вызова в вывод BookImg но почему, то не отображает условие. 10 июн 2020 в 19:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.