Как тут происходит проброс props?

Question

[Евгений Иванов]

Изучаю React по видеоурокам. Видимо, автор что то забыл рассказать.
Код ниже рабочий, но у меня нет достаточного понимания некоторых моментов.

Profile.jsx

const Profile = () => {

/*  Информация для сообщений - текст сообщений и лайки  */
let posts = [
{id: 1, message: "Пост 1", likesCount:1},
{id: 2, message: "Пост 2", likesCount:2},
]

return (
<div>
<MyPosts posts={posts} />
</div>
);
}

В файле выше вроде всё ясно. Мы передали объект-массив в качестве props в компоненту MyPosts.
Фактически вызвали функцию MyPosts с аргументом - массивом.

MyPosts.jsx

const MyPosts = (props) =>
{

let postsElements = props.posts.map( p => <Post message={p.message} likesCount={p.likesCount} /> )

return (

<div className={css.MyPosts}>
<div className={css.posts}>
 /*  Вывод сообщений */
{postsElements}
</div>
</div>
);
}

А вот тут не всё понятно.
Компонента принимает переданный массив (props). То есть данные из Profile пришли.
Далее что то передается в переменную postsElements . Эта строка, её логика не до конца понятна.
Да, я вижу что из props идет обращение к объекту posts (переданным данным) и дальше они "мепятся"?
А внутри этого стрелочная функция возвращающая результат вызова компоненты Post с переданными параметрами.
В общем не до конца понятно что точно там происходит.

Ну и ниже незнакомая мне конструкция {postsElements}.

PS
Я предполагал, что когда в props придет массив, его в цикле передадут в компоненту Post.
Т.е. вызовут её несколько раз, для каждой записи массива. Но тут что то иное...

Comments

[0xD34F]

Изучаю React по видеоурокам. Видимо, автор что то забыл рассказать.

Судя по тексту вопроса, забыли вы:

1. Что есть документация
2. Освоить js

[Егор Живагин]

{postsElements} - просто вывод значения переменной postsElements

Читайте про метод map :)

[Александр Макаров]

У Димыча, у которого вы судя по всему проходите курс, есть на канале плейлист "JS вообще с нуля", пройдите сначала его. Он совсем маленький но общие концепции Вам будут понятны и будет проще двигаться дальше. Не возможно знать React не зная JS.

Answer 1

[tantumus21]

postsElements становится массивом компонентов <Post>. В данном случае .map превращает каждый набор данных из массива props.posts в компонент с этими данными. При этом сам массив props.post никак не изменяется. Почитайте про .map

Изменять props - не очень хорошая идея

Comments

[Евгений Иванов]

Спасибо, стало понятнее. Про map почитал.
Но все ещё не до конца понятна эта стрелочная функция.

p => <Post message={p.message} likesCount={p.likesCount} />

То, что для каждого элемента массива возвращается компонента с сообщениями и лайками ясно.

Но что такое p и как это работает?
По логике p - это строка массива, например id: 1, message: "Пост 1", likesCount:1
Но что это за синтаксис?

У функции есть имя, аргументы и возвращаемое значение.
У стрелочной имени нет. Но аргумент должен быть в скобках.
Вот, например
const MyPosts = (props) =>

[Иван Дербенченко]

Евгений Иванов, если аргумент один скобки можно опустить.
"p" - это элемент массива, в данном случае объект с полями {id: Number, message: String, likesCount:Number}

(p) => <Post message={p.message} likesCount={p.likesCount} />
p => <Post message={p.message} likesCount={p.likesCount} />
post => <Post message={post.message} likesCount={post.likesCount} />
(postItem) => <Post message={postItem.message} likesCount={postItem.likesCount} />

все выше описанное делает одно и то же. Если передается два и более аргумента то скобки обязательны