Вызов метода из одноуровневого компонента с использованием ReactJS - PullRequest
Новая
       40

Вызов метода из одноуровневого компонента с использованием ReactJS

4 голосов
/ 21 апреля 2019

У меня есть один ReactJS App, который я уменьшил до минимума, насколько это возможно на диаграмме ниже:

enter image description here

Сторонапримечание: Для этого App Я использую Redux для управления изменениями состояния.

Этот App содержит:

  • Компонент: UploadScreen с держателем изображения и кнопкой.При нажатии этой кнопки пользователь получает Popup Window, что позволяет ему выбрать изображение из файловой системы своего устройства.Затем это изображение отображается на держателе изображения.

  • Компонент: AuxWidget, который является совершенно другим компонентом (должен быть отдельным), который также содержит кнопкучто при нажатии на него должно появиться окно Select File.Я думал о чем-то вроде запуска события нажатия первой кнопки.

Любая идея о том, как этого добиться?

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

Кроме того,Я думал об использовании jQuery, но это не лучший подход, когда дело доходит до ReactJS.

Кроме того, я подумал об использовании атрибута: ref="foo", чтобы получить ссылку на другой компонент, но ядумаю, что это обычно делается, когда вы хотите, чтобы взаимодействие между родительским и дочерним компонентами.

Кроме того, я думал о EventEmmitter, но я не знаю, является ли это лучшим подходом в этом случае (яиспользуя Redux для управления изменениями состояния между компонентами).

Ответы [ 4 ]

1 голос
/ 21 апреля 2019

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

0 голосов
/ 22 апреля 2019

Если я правильно понимаю вещи, ваша основная задача - повторное использование кода, а не желание вызвать метод одного из братьев. По сути, вам нужен компонент SelectFilePopup, который может быть повторно использован (открыт / закрыт) чисто. Я думаю, что React Portals может быть хорошим решением для этого. Я нашел хороший пример (https://github.com/Assortment/react-modal-component/blob/master/src/components/Modal.js) того, как модал может быть выделен в компонент и вызываться в любом месте кодовой базы.

Использование модального режима выглядит следующим образом (скопировано и немного изменено из App.js в проекте github выше) 

import Modal from './components/Modal';
<Modal><div>Click me to open Modal</div></Modal>

И Модальная составляющая реализации (упрощенная) 

render() {
    return (
        <Fragment>
            <ModalTrigger
                onOpen={this.onOpen}
            />
            {isOpen &&
                <ModalContent/>
            }
        </Fragment>
    )   
}

По умолчанию модальный компонент показывает триггер (т.е. кнопку), когда состояние isOpen имеет значение false. После щелчка, и isOpen переключается в true, ModalContent (т.е. это может быть FilePickerPopup) динамически создается и прикрепляется к телу документа. Вы можете проверить исходный код для более подробной информации. Я думаю, что это очень чистое решение для модальных Так что в вашем случае ваш код может выглядеть примерно так

UploadScreen.js 

import FileSelectPopup from './components/FileSelectPopup';
<FileSelectPopup>{Upload Image}</FileSelectPopup>

AuxWidget.js 

import FileSelectPopup from './components/FileSelectPopup';
<FileSelectPopup>{Upload Image or some other text}</FileSelectPopup>

Так что, в принципе, AuxWidget даже не нужно знать, где находится FileSelectPopup. Это независимый компонент, который можно вызывать где угодно. Предостережение заключается в том, что модальная реализация в проекте, с которым я связан, не является одноэлементной (хотя ее можно изменить, чтобы она была). Поэтому, если AuxWidget и UploadScreen видны пользователю одновременно, нажатие обеих кнопок Upload Image создаст два экземпляра Popup.

0 голосов
/ 21 апреля 2019

Окно загрузки может быть запущено при изменении определенного состояния в приложении.Соответствующее состояние в приложении может быть изменено из разных мест, например из AuxWidget и UploadScreen.Таким образом, они не связаны с окном загрузки.Они просто вызывают функцию, которая передается им, и эта функция изменяет состояние приложения, и оно отображает окно.

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

0 голосов
/ 21 апреля 2019

Я бы определил функцию в родительском компоненте и передал бы ее обоим дочерним элементам как реквизиты

...