Чистый способ реализовать шаблон сообщения в реакции - PullRequest
0 голосов
/ 23 февраля 2019

Есть ли чистый способ реализовать шаблон окна сообщения в реакции таким образом?

import MessageBox from "MessageBox";

class MyComponent {
    render () {...}
    onDeleteButtonClick = async (data) => {

      let result = await  MessageBox.show("Delete?", "Sure you want to delete   this?", MessageBox.Buttons.OkCancel);

      if(result === MessageBox.Result.Ok) {
        deleteThing(data);
      }

    }

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

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

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Вы можете отобразить окно сообщения внутри вашего MyComponent.При позиционировании fixed никто не видит, где в дереве документа был определен блок.Таким образом вы избегаете ссылок на узлы или механизма глобального состояния, такого как Redux.

Вы можете предоставить обработчики щелчков для MessageBox в качестве реквизитов, но может быть даже лучше предоставить buttons рендер prop в компоненте MessageBox, как показано ниже.Таким образом, MessageBox полностью контролирует рендеринг, а MyComponent полностью контролирует функциональность.

import MessageBox from './MessageBox'

class MyComponent extends React.Component {
  onDeleteButtonClick(data) => {
    this.setState({ data, messageBoxOpen: true })
  }

  onMessageOkClick() => {
    deleteThing(this.state.data)
    this.setState({ messageBoxOpen: false })
  }

  render() {
    return (
      // ...content...
      <button onClick={this.onDeleteButtonClick}>delete</button>
      // more content
      <MessageBox
        open={this.state.messageBoxOpen}
        text="Question?"
        buttons={(Button) => [
          <Button text="Ok" onClick={this.onMessageOkClick} />,
          <Button text="Cancel" onClick={this.setState({ messageBoxOpen: false })} />
        ]}
      />
    )
  }
}

// MessageBox.jsx

const Button = ({ text, onClick }) => { /* ... */ }

const MessageBox = ({ open, text, buttons }) => open ? (
  <div>
    {text}
    {buttons(Button)}
  </div>
) : null

0 голосов
/ 23 февраля 2019

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

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

<div>
  <Main />
  <MessageModal />
</div>

Будучи состоянием редуктора MessageModal:

{
open: true|false,
props: {}|{...}
}

Затем вы просто импортируете действие открытия / закрытия окна сообщения и используете его там, где вам это нужно (Компоненты / Саги)

Другой вариант может использовать контекст реагирования

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