React Разделение бизнес логики и UX / Спуск props

Question

Пробую обучиться принципам разделения UX и BLL компонентов в Реакте. Поднимаю все данные в вверх в index.js что б оставить только чистые функции. Столкнулся с непониманием, может кто-то подскажет что не так

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) {
   const {booksDescription} = props;

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


function BookList (props){
   let {booksDescription} = props;

  
  let BooksList = booksDescription.map((el) => (
    <BookItem
      id={el.id}
      key={el.id}
      bookName={el.bookName}
      authorNumber={el.authorNumber}
    />
  ));

return ( 
   <BooksList/>
)
}


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="#">
          <p className="bl_book__name">
            <p className="bl_book__title">{book.bookName}</p>
            <p className="bl_book__author">{authorsOfBookFull}</p>
          </p>
        </a>
      </div>
    );
  }
}




function App(props) {
  
   const {booksDescription} = props;
  
  return <WorkSpace booksDescription = {props.booksDescription}  />;
}

ReactDOM.render(<App booksDescription={booksDescription} />, 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>

Сборщик проекта пишет что я как-то не так передаю данные в компоненту BooksList. Вроде как ставил дебагер и до компоненты BooksList props спускаються, а вот дальше идет непонимание.

Answer 1

У вас две ошибки:

{BookList booksDescription = {booksDescription} } - невалидный синтаксис.
Неправильный return. Надо return BooksList;.

Рабочий пример

https://stackblitz.com/edit/react-x2nqz2?file=index.js

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) {
   const {booksDescription} = props;

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


function BookList (props){
   let {booksDescription} = props;

  
  let BooksList = booksDescription.map((el) => (
    <BookItem
      id={el.id}
      key={el.id}
      bookName={el.bookName}
      authorNumber={el.authorNumber}
    />
  ));

  return BooksList;
}


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="#">
          <p className="bl_book__name">
            <p className="bl_book__title">{book.bookName}</p>
            <p className="bl_book__author">{authorsOfBookFull}</p>
          </p>
        </a>
      </div>
    );
  }
}




function App(props) {
  
   const {booksDescription} = props;
  
  return <WorkSpace booksDescription = {props.booksDescription}  />;
}

render(<App booksDescription={booksDescription} />, document.getElementById("root"));

БЛОГ НА HUSL

React Разделение бизнес логики и UX / Спуск props

Ответы (1 шт):