Компоненты и пропсы

@ynxarmed · Регистрация: 21.08.2010

Студворк — интернет-сервис помощи студентам

Добрый день!

У меня есть массив с названиями животных, это выводится на экран с помощью картинок, я могу отсортировать массив картинок по группам животных - это работает, у меня один стэйт для этого создан. Теперь мне надо чтобы при клике на картинку - картинка менялась на текст описание животного. Говорят что это надо делать с помощью нового стейта и компонентов, наверное и пропсы надо использовать, я пока этого не понимаю. Может кто-нибудь знает как это можно сделать?

@bodynar · 08.11.2020, 17:53

ynxarmed, Добрый день.

То есть по клику на любой элемент (картинку) - он должен исчезнуть и на его месте появиться текст?
Если так - то через состояние делать можно так: элемент перечисления представить в виде компонента в рамках которого описать функцию клика с изменением внутреннего состояния; на основе состояния уже реализовать условный рендеринг

@ynxarmed · 08.11.2020, 20:58 **[ТС]**

Да, вы правильно поняли, но я не могу никак пока это реализовать, вот мой код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import React, { useState } from 'react';
import './App.css';
import dog1 from './components/images/dog1.png';
import dog2 from './components/images/dog2.png';
import dog3 from './components/images/dog3.png';
import cat1 from './components/images/cat1.png';
import cat2 from './components/images/cat2.png';
import cat3 from './components/images/cat3.png';
import pig1 from './components/images/pig1.png';
import pig2 from './components/images/pig2.png';
import pig3 from './components/images/pig3.png';
 
interface AnimalType {
  id: number;
  name: string;
  type: string;
  description: string;
  img: string;
}
 
const animals = [
  { id: 1, name: 'Dog1', type: 'Dog', description: 'Lucky dog', img: dog1 },
  { id: 2, name: 'Dog2', type: 'Dog', description: 'Dog with mask', img: dog2 },
  { id: 3, name: 'Dog3', type: 'Dog', description: 'Nice dog', img: dog3 },
  { id: 4, name: 'Cat1', type: 'Cat', description: 'A lot of cats', img: cat1 },
  { id: 5, name: 'Cat2', type: 'Cat', description: 'Sly cat', img: cat2 },
  { id: 6, name: 'Cat1', type: 'Cat', description: 'Shy cat', img: cat3 },
  { id: 7, name: 'Pig1', type: 'Pig', description: 'Funny pig', img: pig1 },
  { id: 8, name: 'Pig2', type: 'Pig', description: 'Evil pig', img: pig2 },
  { id: 9, name: 'Pig3', type: 'Pig', description: 'Angry pig', img: pig3 },
];
 
const Animals = () => {
  const [result, setResult] = useState<AnimalType[]>(animals);  
 
  const showDogs = () => {
    const newArr = animals.filter(animal => animal.type ==='Dog');  
    setResult(newArr);
  };
 
  const showCats = () => {
    const newArr = animals.filter(animal => animal.type ==='Cat');  
    setResult(newArr);
  };
 
  const showPigs = () => {
    const newArr = animals.filter(animal => animal.type ==='Pig');  
    setResult(newArr);
  };
 
  const showAll = () => {
    const newArr = [...animals];  
    setResult(newArr);
  };
  
 
  return (
    <div className="animals">
      {result.map((animal) => (
        <div key={animal.id} className="animal-card"><img src={animal.img} alt="" /></div>
      ))}      
      <br />
      <>
        <br />
        <button type="button" onClick={showDogs}>Show dogs</button>
        <br />
        <button type="button" onClick={showCats}>Show cats</button>
        <br />
        <button type="button" onClick={showPigs}>Show pigs</button>
        <br />
        <button type="button" onClick={showAll}>Show all</button>
      </>
    </div>
  );
};
 
export default Animals;

Добавлено через 31 минуту
Знаю что надо добавить что-то вроде этого в отдельный файл и соединить между собой, чтобы работало и как-то вызвать функцию по клику, но пока я запутался, тут конечно код неправильный второго файла:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from 'react';
 
interface Props {
    id: number;
    name: string;
    type: string;
    description: string;
    img: string;
  }
 
const Descr: React.FC<Props> = ([{id, name, type, description, img}]) => {
   
return <div>
    {result.map((animal) => (
        <div key={animal.id} className="animal-card"><h2>{animal.description}</h2></div>
      ))} 
    </div>;
}
 
export default Descr;

@bodynar · 08.11.2020, 21:11

ynxarmed, Попробуйте по следующему подходу.

JavaScript
1
2
3
4
5
6
7
8
9
export default function AnimalList(props) {
    return (
        {props.animals.map(animal =>
            <Animal
                animal={animal}
            />
        )}
    );
};

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
export default function Animal(props) {
    const [state, setState] = React.useState({
        animal: props.animal,
        infoDisplayed: false,
    });
 
    const onInfoToggle = React.useCallback(() => {
        setState({
            ...state,
            infoDisplayed: !state.infoDisplayed
        });
    }, [state]);
 
    return (
        <div>
            <label>
                {state.animal.name}
            </label>
            <AnimalDescription
                isToggled={state.infoDisplayed}
                animalImg={state.animal.img}
                description={state.animal.description}
                onClick={onInfoToggle}
            />
        </div>
    );
};
 
const AnimalDescription = (props) => {
    if (props.isToggled) {
        return (
            <div className="animal-container__description"
                onClick={props.onClick}
            >
                <p>
                    {props.description}
                </p>
            </div>
        );
    } else {
        return (
            <div className="animal-container__image"
                onClick={props.onClick}
            >
                <img src={props.animalImg}/>
            </div>
        );
    }
};

@ynxarmed · 08.11.2020, 21:22 **[ТС]**

Для меня это пока не понятно, то есть Вы не создавали новый State?

@bodynar · 08.11.2020, 22:17

ynxarmed, Когда я отправлял свой ответ - не увидел вашего.
В моем случае состояние есть у дочернего компонента. Вам необходимо просто соединить решение со своим текущим.

@ynxarmed · 08.11.2020, 23:44 **[ТС]**

Пока даже не знаю что и как соединить, я только третий день знакомлюсь с реактом.

@bodynar · 09.11.2020, 01:54

ynxarmed, У вас уже есть компонент Animals
Просто замените в нем

JavaScript
1
2
3
{result.map((animal) => (
        <div key={animal.id} className="animal-card"><img src={animal.img} alt="" /></div>
      ))}

на

JavaScript
1
2
3
4
5
6
{result.map((animal) => (
        <Animal
                key={animal.id}
                animal={animal}
            />
      ))}

И добавьте компонент Animal, следуя моему примеру (вы можете переписать по аналогии на классовый компонент).

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
export default function Animal(props) {
    const [state, setState] = React.useState({
        animal: props.animal,
        infoDisplayed: false,
    });
 
    const onInfoToggle = React.useCallback(() => {
        setState({
            ...state,
            infoDisplayed: !state.infoDisplayed
        });
    }, [state]);
 
    return (
        <div>
            <label>
                {state.animal.name}
            </label>
            <AnimalDescription
                isToggled={state.infoDisplayed}
                animalImg={state.animal.img}
                description={state.animal.description}
                onClick={onInfoToggle}
            />
        </div>
    );
};
 
const AnimalDescription = (props) => {
    if (props.isToggled) {
        return (
            <div className="animal-container__description"
                onClick={props.onClick}
            >
                <p>
                    {props.description}
                </p>
            </div>
        );
    } else {
        return (
            <div className="animal-container__image"
                onClick={props.onClick}
            >
                <img src={props.animalImg}/>
            </div>
        );
    }
};

Суть в том, что для элемента списка у вас отдельный компонент, в котором есть свое состояние

@ynxarmed · 09.11.2020, 11:53 **[ТС]**

Я не понимаю, я так сделал, ничего не работает:

Первый файл:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import React, { useState } from 'react';
import './App.css';
import dog1 from './components/images/dog1.png';
import dog2 from './components/images/dog2.png';
import dog3 from './components/images/dog3.png';
import cat1 from './components/images/cat1.png';
import cat2 from './components/images/cat2.png';
import cat3 from './components/images/cat3.png';
import horse1 from './components/images/horse1.png';
import horse2 from './components/images/horse2.png';
import horse3 from './components/images/horse3.png';
 
interface AnimalType {
  id: number;
  name: string;
  type: string;
  description: string;
  img: string;
}
 
const animals = [
  { id: 1, name: 'Dog1', type: 'Dog', description: 'Lucky dog', img: dog1 },
  { id: 2, name: 'Dog2', type: 'Dog', description: 'Dog with mask', img: dog2 },
  { id: 3, name: 'Dog3', type: 'Dog', description: 'Nice dog', img: dog3 },
  { id: 4, name: 'Cat1', type: 'Cat', description: 'A lot of cats', img: cat1 },
  { id: 5, name: 'Cat2', type: 'Cat', description: 'Sly cat', img: cat2 },
  { id: 6, name: 'Cat1', type: 'Cat', description: 'Shy cat', img: cat3 },
  { id: 7, name: 'Horse1', type: 'Horse', description: 'White horse', img: horse1 },
  { id: 8, name: 'Horse2', type: 'Horse', description: 'Brown horse', img: horse2 },
  { id: 9, name: 'Horse3', type: 'Horse', description: 'Black horse', img: horse3 },
];
 
const Animals = () => {
  const [animalImages, setAnimalImages] = useState<AnimalType[]>(animals);
  const [animalDescr, setAnimalDescr] = useState<AnimalType[]>(animals);
 
  const showDogs = () => {
    const newArr = animals.filter((animal) => animal.type === 'Dog');
    setAnimalImages(newArr);
  };
 
  const showCats = () => {
    const newArr = animals.filter((animal) => animal.type === 'Cat');
    setAnimalImages(newArr);
  };
 
  const showHorses = () => {
    const newArr = animals.filter((animal) => animal.type === 'Horse');
    setAnimalImages(newArr);
  };
 
  const showAll = () => {
    const newArr = [...animals];
    setAnimalImages(newArr);
  };
 
  return (
    <div className="animals">
      {animalImages.map((animal) => (
        <Animal
                key={animal.id}
                animal={animal}
            />
      ))}
      <br />
      <>
        <br />
        <button type="button" onClick={showDogs}>
          Show dogs
        </button>
        <br />
        <button type="button" onClick={showCats}>
          Show cats
        </button>
        <br />
        <button type="button" onClick={showHorses}>
          Show horses
        </button>
        <br />
        <button type="button" onClick={showAll}>
          Show all
        </button>
      </>
    </div>
  );
};
 
export default Animals;

Второй файл:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
export default function Animal(props) {
    const [state, setState] = React.useState({
        animal: props.animal,
        infoDisplayed: false,
    });
 
    const onInfoToggle = React.useCallback(() => {
        setState({
            ...state,
            infoDisplayed: !state.infoDisplayed
        });
    }, [state]);
 
    return (
        <div>
            <label>
                {state.animal.name}
            </label>
            <AnimalDescription
                isToggled={state.infoDisplayed}
                animalImg={state.animal.img}
                description={state.animal.description}
                onClick={onInfoToggle}
            />
        </div>
    );
};
 
const AnimalDescription = (props) => {
    if (props.isToggled) {
        return (
            <div className="animal-container__description"
                onClick={props.onClick}
            >
                <p>
                    {props.description}
                </p>
            </div>
        );
    } else {
        return (
            <div className="animal-container__image"
                onClick={props.onClick}
            >
                <img src={props.animalImg}/>
            </div>
        );
    }
};

Добавлено через 22 минуты
У меня сам главный файл называется Animal.tsx, как я в него же могу добавить компонент с таким же названием <Animal /> ?

Ну сюда по вашему примеру вы добавляете так в главный файл:

JavaScript
1
2
3
4
<Animal
                key={animal.id}
                animal={animal}
            />

Добавлено через 7 минут
В моем понимании это выглядит так:
Есть главный файл, например Animal.tsx
Есть второй файл, например AnimalDescr.tsx - он же и есть компонент, в котором есть какая-либо функция.
И мы помещаем этот компонент в первый файл Animal.tsx, и он внутри первого файла выглядит так: <AnimalDescr />

@bodynar · 09.11.2020, 12:16

Сообщение от ynxarmed

У меня сам главный файл называется Animal.tsx, как я в него же могу добавить компонент с таким же названием <Animal /> ?

Вы понимаете смысл разделения на компоненты?

В данном случае вы описываете компонент Animals, который представляет компонент со списком животных и небольшой фильтрацией.
Для отображения каждого животного описан отдельный компонент - Animal, в котором также имеется некая логика (смены состояний, например).

Как корректно использовать 2 компонент в 1 - просто описать вызов, как вы это уже сделали, но также импортировать компонент

import Animal from './path'; // путь до файла с компонентом (если располагается в той же директории, то просто './animal')

Сообщение от ynxarmed

В моем понимании это выглядит так:
Есть главный файл

У вас "главный" файл - это index.ts, где есть строки следующего вида

JavaScript
1
2
3
4
5
6
ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

Все остальное - ваши компоненты и пр.

@ynxarmed · 09.11.2020, 15:17 **[ТС]**

Я сделал так, не знаю как теперь правильно сделать эту функцию, добавил в массив еще один объект changer: boolean, который будет менять картинку на текст:

@bodynar · 09.11.2020, 15:26

ynxarmed, Прикрепите, пожалуйста, полный код ваших 2 компонентов.

Сообщение от ynxarmed

в массив еще один объект changer: boolean, который будет менять картинку на текст

Я же вам привел пример с изменением состояния сообщением выше, где на основе которого изменяется отображение.

Добавлено через 5 минут

Сообщение от ynxarmed

У меня сам главный файл называется Animal.tsx

Если у вас в файле с названием Animal лежит компонент с именем Animals, то это сбивает с толку.
Можете сделать по следующему принципу: Название файла = название компонента, который экспортируется как основной (export default)

@ynxarmed · 09.11.2020, 15:37 **[ТС]**

Я уже ничего не понимаю, хочу просто эту фунцкию сделать, которая на картинке, чтобы она работала при нажатии true or false.

@bodynar · 09.11.2020, 15:49

ynxarmed, Прочитайте документацию реакта, разберитесь с понятиями компонент и состояние в таком случае.
По итогу у вас должно быть 2 компонента: 1 для отображения и фильтрации списка, 2 для отображения информации.
Во 2 компоненте вы управляете видимостью описания.

Если у вас ничего не получится, то вечером я скину вам рабочий пример.

@ynxarmed · 09.11.2020, 15:54 **[ТС]**

Читаю документацию, не могу всё это воссоздать в своей программе.

@bodynar · 09.11.2020, 15:57

ynxarmed, Давайте по порядку тогда. Что вы хотите сделать и что именно у вас не получается

@ynxarmed · 09.11.2020, 17:14 **[ТС]**

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

@bodynar · 09.11.2020, 17:56

ynxarmed, Компоненты - некие независимые части приложения, согласно документации реакта. Пропсы - (название объекта) данные для инициализации компонента.
По указанной ссылке изучите документацию, не удаляйте ваш старый код, просто обновите его позже, когда у вас будет полная картинка в голове.

@ynxarmed · 09.11.2020, 18:08 **[ТС]**

Вот я для теста сделал новых два файла:

1.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { useState } from 'react';
import './App.css';
import './TestComponent';
import TestComponent from './TestComponent';
 
function App() {
 
  const [state, setState] = useState(0)
 
  return (
    <div>
      <h1>{state}</h1>
      <button onClick={() => {
        setState(state + 100)
      }}>
        +100
      </button>
    </div>
  );
  <TestComponent />
}
 
export default App;

2.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { useState } from 'react';
 
function TestComponent() {
 
    const [state, setState] = useState(0)
  
    return (
      <div>
        <h1>{state}</h1>
        <button onClick={() => {
          setState(state + 200)
        }}>
          +200
        </button>
      </div>
    );
  }
  
  export default TestComponent;

В моем понимании компонент это <TestComponent /> ,который находится во втором файле - я его поместил в первый, но страница не загружается, видимо я не так это понимаю.

Добавлено через 1 минуту
А то что вы прислали я уже читал, наверное не углубился в это и до конца не понял, надо еще пройтись.

@bodynar · 09.11.2020, 18:22

Сообщение от ynxarmed

В моем понимании компонент это <TestComponent /> ,который находится во втором файле

Нет, в данном случае у вас 2 компонента - App и TestComponent. Компоненты могут быть вложены друг в друга и могут располагаться композиционно.

Сообщение от ynxarmed

но страница не загружается

Ошибка в консоли есть или просто не загружается?

Сообщение от ynxarmed

import './TestComponent';

Для чего вам эта строка импорта? Если у вас корректная есть ниже

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@ynxarmed 17 / 3 / 0 Регистрация: 21.08.2010 Сообщений: 230

	Компоненты и пропсы 08.11.2020, 16:44. Показов 2673. Ответов 28 Метки нет (Все метки) Добрый день! У меня есть массив с названиями животных, это выводится на экран с помощью картинок, я могу отсортировать массив картинок по группам животных - это работает, у меня один стэйт для этого создан. Теперь мне надо чтобы при клике на картинку - картинка менялась на текст описание животного. Говорят что это надо делать с помощью нового стейта и компонентов, наверное и пропсы надо использовать, я пока этого не понимаю. Может кто-нибудь знает как это можно сделать? 0

@bodynar 345 / 307 / 135 Регистрация: 14.03.2015 Сообщений: 1,158 Записей в блоге: 1
	08.11.2020, 17:53
	ynxarmed, Добрый день. То есть по клику на любой элемент (картинку) - он должен исчезнуть и на его месте появиться текст? Если так - то через состояние делать можно так: элемент перечисления представить в виде компонента в рамках которого описать функцию клика с изменением внутреннего состояния; на основе состояния уже реализовать условный рендеринг 0

@ynxarmed 17 / 3 / 0 Регистрация: 21.08.2010 Сообщений: 230
	08.11.2020, 21:22 [ТС]
	Для меня это пока не понятно, то есть Вы не создавали новый State? 0

@bodynar 345 / 307 / 135 Регистрация: 14.03.2015 Сообщений: 1,158 Записей в блоге: 1
	08.11.2020, 22:17
	ynxarmed, Когда я отправлял свой ответ - не увидел вашего. В моем случае состояние есть у дочернего компонента. Вам необходимо просто соединить решение со своим текущим. 0

@ynxarmed 17 / 3 / 0 Регистрация: 21.08.2010 Сообщений: 230
	08.11.2020, 23:44 [ТС]
	Пока даже не знаю что и как соединить, я только третий день знакомлюсь с реактом. 0

@ynxarmed 17 / 3 / 0 Регистрация: 21.08.2010 Сообщений: 230
	09.11.2020, 15:17 [ТС]
	Я сделал так, не знаю как теперь правильно сделать эту функцию, добавил в массив еще один объект changer: boolean, который будет менять картинку на текст: Миниатюры 0

@ynxarmed 17 / 3 / 0 Регистрация: 21.08.2010 Сообщений: 230
	09.11.2020, 15:37 [ТС]
	Я уже ничего не понимаю, хочу просто эту фунцкию сделать, которая на картинке, чтобы она работала при нажатии true or false. 0

@bodynar 345 / 307 / 135 Регистрация: 14.03.2015 Сообщений: 1,158 Записей в блоге: 1
	09.11.2020, 15:49
	ynxarmed, Прочитайте документацию реакта, разберитесь с понятиями компонент и состояние в таком случае. По итогу у вас должно быть 2 компонента: 1 для отображения и фильтрации списка, 2 для отображения информации. Во 2 компоненте вы управляете видимостью описания. Если у вас ничего не получится, то вечером я скину вам рабочий пример. 0

@ynxarmed 17 / 3 / 0 Регистрация: 21.08.2010 Сообщений: 230
	09.11.2020, 15:54 [ТС]
	Читаю документацию, не могу всё это воссоздать в своей программе. 0

@bodynar 345 / 307 / 135 Регистрация: 14.03.2015 Сообщений: 1,158 Записей в блоге: 1
	09.11.2020, 15:57
	ynxarmed, Давайте по порядку тогда. Что вы хотите сделать и что именно у вас не получается 0

@ynxarmed 17 / 3 / 0 Регистрация: 21.08.2010 Сообщений: 230
	09.11.2020, 17:14 [ТС]
	Я думаю вообще надо начать новую программу, в которой будут и компоненты и несколько хуков и пропсы, я не понимаю взаимодействие между хуками, компонентами и пропсами. 0

@bodynar 345 / 307 / 135 Регистрация: 14.03.2015 Сообщений: 1,158 Записей в блоге: 1
	09.11.2020, 17:56
	ynxarmed, Компоненты - некие независимые части приложения, согласно документации реакта. Пропсы - (название объекта) данные для инициализации компонента. По указанной ссылке изучите документацию, не удаляйте ваш старый код, просто обновите его позже, когда у вас будет полная картинка в голове. 0