Откуда идёт зависимость от user?

Question

[Nikita Shchypylov]

Доброй ночи

Есть код:

const block = {
		"author": {
			"url": "/",
			"name": "Nikulio"
		},
		"text": "Hello, bEAtch",
		"date": "Recently"
	}

	function Comment(props) {
		return (
				<div className="Comment">
					<UserInfo user={props.author}/>
					<div className="Comment-text">
						{props.text}
					</div>
				</div>
		);
	}
	function UserInfo(props) {
		return (
				<div className="UserInfo">
					<Avatar user={props.user}/>
					<div className="UserInfo-name">
						{props.user.name}
					</div>
				</div>
		);
	}
	function Avatar(props) {
		return (
				<img className="Avatar"
				     src={props.user.url}
				     alt={props.user.name}
				/>
		)
	}

Только осваиваю Реакт. В целом всё ясно, но непонятно, откуда берется в этой строчке
<Avatar user={props.user}/>
Откуда мы тут взяли user и откуда этот user взялся? Получается что-то вроде props.author.user? Мы ведь в аргумент компонента UserInfo уже передали нужный объект author.
Надеюсь, поянтно донёс проблему
Спасибо за пояснение

Answer 1

[Максим]

У вас порядок передачи пропсов в компонентах выглядит так: Comment -> UserInfo -> Avatar

Comment передает в свойстве user объект:

{
       "url": "/",
      "name": "Nikulio"
}

Следовательно, этот объект теперь доступен в UserInfo через props.user. В Avatar так же передается в качестве свойства user этот же объект.

Следовательно, у Avatar в props будет объект:

{
    user: {
        url...
        name....
    }
}

Следовательно, в Avatar к значениям этих свойств можно обратиться: props.user.url , props.user.name

Comments

[Nikita Shchypylov]

Спасибо, теперь понятнее, но логичнее не стало. Такая зависимость от свойства....Буду разбираться

[Максим]

Nikita Shchypylov: не зависимость, а так сказать: то что передали компоненту, то у него в props и есть.