在反应中实现消息框模式的干净方法

Question

有没有一种干净的方法来实现这样的反应中的消息框模式？

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);
      }

    }

如果不求助于 refs、违反 promise 规则（进行延迟）或做 DOM 诡计（使用渲染组件的包装器），似乎没有办法解决这个问题。

我构建了一个遵循我上面的 API 的组件，除了回调，但它需要一个 ref 并且感觉我没有以反应的方式构建东西。

Answer 1

您可以在MyComponent 中呈现一个消息框。使用fixed 定位，没有人可以看到该框在文档树中的哪个位置被定义。这样，您就可以避免节点引用或像 Redux 这样的全局状态机制。

您可以将点击处理程序作为道具提供给MessageBox，但在MessageBox 组件中提供buttons 渲染道具 可能会更好，如下所示。这样，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

Answer 2

我几乎总是看到这种模式使用 redux 实现，我会这样解释，因为我认为这是社区选择最多的方法。

您可以使用redux 实现消息框。您在应用程序源中实例化消息框组件 App.js

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

作为 MessageModal 的 reducer 状态：

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

然后你只需导入消息框的打开/关闭操作，并在需要的地方使用它（组件/Sagas）

其他选项可能是使用react’s context