Как правильно инкапсулировать внутри компонента React?

Question

[Василий]

Есть компонент

return (
<div className={classNames}>
  <img
    className={[classes["user__avatar"]]}
    alt={props.altAvatar}
    src={props.srcAvatar}
  />
  <h1 className={[classes["user__name"]]}>{props.userName}</h1>
  <Button className={[classes["user__logout"]]} onClick={logOut}>
    Logout
  </Button>
</div>

Я его инициализирую в другом компоненте с такими данными

<UserProfile
        className={[classesAppContainer["app__body"]]}
        userName={userProfileName}
        alt={userProfileName}
        src={userProfilePhoto}
      />

Вопрос, как мне передавать данные Alt и Src не снаружи, а инкапсулировано?

Comments

[McBernar]

В смысле инкапсулированно передавать? Вы точно в терминах не путаетесь?

[Василий]

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

[McBernar]

Почитайте. Прям ответ на ваш вопрос.
https://ru.reactjs.org/docs/components-and-props.html

[Василий]

McBernar, я правильно понимаю, из статьи, что мне нужно картинку вынести в отдельный компонент? Это и будет решением этой проблемы? По сути мы же получается уже будем передавать props не "снаружи", а внутри в дочерний эллемент ?

[McBernar]

Василий, вы не будете в родительском компоненте биндить конкретные пропсы. Просто кидаете общий объект, а в аватарке из него вытаскиваете нужые альты и сорсы.

Кажется, именно об этом речь в вопросе. Задача родительского компонента — просто передать пропсы внутрь. А что уж с ними дочерний компонент будет делать — не его проблема. Это похоже на инкапсуляцию, хотя этот термин я бы тут все равно не применял.

[Василий]

McBernar, кстати вопрос который мне поставили на мою форму записи выглядит вот так

- Почему ты решил задавать alt и src снаружи? Разве это нельзя инкапсулировать внутри компонета UserProfile?

И затем я не понял что как именно нужно сделать

[McBernar]

Ну да, это оно. Компоненты лучше делать максимально независимыми. Если к профилю добавится еще, например, статус — онлайн или оффлайн — вы поменяете сам userProfile, но вам не придется добавлять пропс status во всех местах, где этот компонент используется. Вы так и будете передавать один проп user, то есть, для родительских компонентов ничего не изменится.

P.s. Инкапсулированно ничего передать нельзя. Это абракадабра :) Инкапсуляция — это когда вы реализацию прячете внутрь компонента и даете к ней строго ограниченный доступ снаружи. То есть, то, что описал выше.

Answer 1

[Алексей Николаев]

1. Я бы попробовал обернуть в HOC withUser или сделать одноименный хук
2. Вообще это нормально. Обычный компонент, который рендерит то, что ему дают.
3. Сделать его умнее, чтобы получал эти данные сам. Тут перекликается с п.1

Comments

[Василий]

А можно пример кодом? HOC просто ещё не освоил

Answer 2

[Akmal Islamov]

Контекстом

Comments

[Василий]

А можно пример какой то? Очень хочется разобраться

[Akmal Islamov]

Василий, Пример не нужен в YouTube посмотрите уроки по React Context