Вызвать из компонента1 другой компонент2. Уловный рендеринг и состояния

@WhiteRing · Регистрация: 18.06.2020

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

Господа, добрый вечер. Что-то я совсем запутался.
У меня есть множество компонентов(это маркеры на карте), по контекстному клику которых я вызываю диалог для каждого компонента свой и передаю данные в него (компонент Dialog из PrimeReact). При вызове диалога из компонента я использую useState для управления видимостью диалога. Все работает отлично, у каждого компонента-маркера свое состояние видимости его конкретного диалога.
Рабочий упрощенный код ниже:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 export default function BucketMarker({ bucket }) {
    const [visible, setVisible] = useState(false)
 
    return (
        <Marker eventHandlers={{ contextmenu: () => setVisible(true) }} >
            <Dialog
                header={`Вы открыли маркер № ${bucket.movCarNumber}?`}
                visible={visible}
                modal={true}
                style={{ width: '30vw' }}
                onHide={() => setVisible(false)}>
            </Dialog> 
        </Marker>
    )
}

- в этом коде все хорошо, кликаем контекстом, открывается диалог, его видимости встает в true, при закрытии встает в false.

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

И тут начинается интересное - что делать с состоянием? Если я в компоненте с маркером оставляю все тот же useState, так же его по контексту переключаю, открываю диалог условным рендерингом, а у него уже в свою очередь свой useState видимости, то получается нерабочая абра-кадабра:
1) кликаю контекстом, useState маркера ставится в true, условный рендеринг срабатывает, открывается диалог
2) в диалоге свой useState, изначально выставленный как true, далее закрываю диалог, внутреннее состояние диалога уже false
3) в это время в маркере все еще состояние useState после контекстного щелчка true, что не дает открыть диалог повторно

И я говорю, окей, давай создадим в redux сторе состояние для нашего диалога, чтобы подключить его и в диалоге и в маркере. Однако состояние для этого окна будет одно, а маркеров на карте огомное количество, при чем заранее оно не известно, что при манипуляции состоянием вызовет непредвиденное поведение.

Как мне правильно вынести диалог в отдельный компонент? И нужно ли это?

krvsa · 19.02.2025, 16:44

WhiteRing, твой "пример" не демонстрирует проблему...

Можешь сделать пример, который можно запустить у себя и посмотреть чего ты там ваяешь?

@WhiteRing · 19.02.2025, 16:58 **[ТС]**

krvsa, да, потому что пример рабочий, проблема при выносе Dialog в отдельный компонент.
Я бы сделал простенький пример, но там надо накатывать столько всего в этот пример втч и картографический движок.
Я думаю, тут проблема решается паттерном проектирования каким-то, а я не могу понять как.

krvsa · 19.02.2025, 18:57

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

Я думаю, тут проблема решается паттерном проектирования каким-то, а я не могу понять как.

Для этого и нужен пример.

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

Я бы сделал простенький пример, но там надо накатывать столько всего в этот пример втч и картографический движок.

Пример должен быть простым. И без "картографии".
Ты ведь все делаешь на компонентах и со стейтом. При чем тут карты?

krvsa · 20.02.2025, 11:10

WhiteRing, вот смотри...
Я из твоего куска сделал простенький тестовый пример.
Теперь ты его можешь использовать и сделать, на его основе, свой тестовый пример на котором проявляется твоя проблема.
Далее посмотрим что можно предложить в качестве альтернативы.

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

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
import { useState } from 'react'
//import './app.css'
 
 
//
function App() {
  return <main>
      <BucketMarker num={1} />
  </main>
}
 
//
function Dialog(props) {
  if (!props.on) return null
  const act = _ => props.act(false)
  return <div style={{border: '1px solid'}}>
    <p>{props.header}</p>
    <button onClick={act}>Выкл</button> 
  </div>
}
//
function Marker(props) {
  const act = _ => props.act(v => !v)
  return <div>
    <button onClick={act}>{props.on ? 'Выкл' : 'Вкл'}</button> 
    {props.children}
  </div>
}
  //
function BucketMarker(props) {
  const [visible, setVisible] = useState(false)
 
  return (
      <Marker act={setVisible} on={visible}>
          <Dialog
            on={visible}
            header={`Вы открыли маркер № ${props.num}?`}
            act={setVisible}
          />
      </Marker>
  )
}
 
export default App

@WhiteRing · 20.02.2025, 17:03 **[ТС]**

krvsa, честно говоря, я впервые вижу, чтобы функция управления состоянием родительского компонента передавалось в дочерний, как в случае с setVisible, передаваемым в Dialog...но, поскольку я новичок, удивляться не буду. Это кое-что меняет...надо подумать, как это применить в моем случае. Спасибо!

А Ваш пример это широкоиспользуемая практика?

Добавлено через 5 минут
krvsa, кстати, нашел мною написанный HOC, в который как раз передаю функции управления состоянием в redux...почему-то у меня в голове стояло ограничение, или же я просто не задумывался, что можно и пресловутый setState передавать куда-то.

krvsa · 20.02.2025, 20:27

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

А Ваш пример это широкоиспользуемая практика?

Я лишь пытался угадать что делают твои компоненты...

Насколько "широка" такая практика мне не известно.

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

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

я впервые вижу, чтобы функция управления состоянием родительского компонента передавалось в дочерний

Так она не меняется - так можно лучше контролировать рендер компонента.

@WhiteRing · 24.02.2025, 17:43 **[ТС]**

krvsa, спасибо большое Вам за помощь, благодаря вашему коду смог реализовать необходимую логику, а так же взглянул под другим углом на функциональные react-компоненты.
Топик можно закрывать.

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

krvsa 3837 / 1682 / 431 Регистрация: 14.03.2022 Сообщений: 4,250
	19.02.2025, 16:44
	WhiteRing, твой "пример" не демонстрирует проблему... Можешь сделать пример, который можно запустить у себя и посмотреть чего ты там ваяешь? 0

@WhiteRing 1 / 1 / 0 Регистрация: 18.06.2020 Сообщений: 41
	19.02.2025, 16:58 [ТС]
	krvsa, да, потому что пример рабочий, проблема при выносе Dialog в отдельный компонент. Я бы сделал простенький пример, но там надо накатывать столько всего в этот пример втч и картографический движок. Я думаю, тут проблема решается паттерном проектирования каким-то, а я не могу понять как. 0

@WhiteRing 1 / 1 / 0 Регистрация: 18.06.2020 Сообщений: 41
	20.02.2025, 17:03 [ТС]
	krvsa, честно говоря, я впервые вижу, чтобы функция управления состоянием родительского компонента передавалось в дочерний, как в случае с setVisible, передаваемым в Dialog...но, поскольку я новичок, удивляться не буду. Это кое-что меняет...надо подумать, как это применить в моем случае. Спасибо! А Ваш пример это широкоиспользуемая практика? Добавлено через 5 минут krvsa, кстати, нашел мною написанный HOC, в который как раз передаю функции управления состоянием в redux...почему-то у меня в голове стояло ограничение, или же я просто не задумывался, что можно и пресловутый setState передавать куда-то. 0

@WhiteRing 1 / 1 / 0 Регистрация: 18.06.2020 Сообщений: 41
	24.02.2025, 17:43 [ТС]
	krvsa, спасибо большое Вам за помощь, благодаря вашему коду смог реализовать необходимую логику, а так же взглянул под другим углом на функциональные react-компоненты. Топик можно закрывать. 0