可以多次创建的 React.js “全局”组件

Question

我无法理解这一点。

问题：假设有一个应用程序，我想从我的代码中创建某种通知/对话框/等。

我可以拥有“全局”组件并对其进行管理，但它会限制我一次只能接收一个通知，这不适合。

render() {
  <App>
    // Some components...
    <Notification />
  </App>
}

或者我可以通过组件Notification 本身管理多个通知。但是状态管理会不清楚。

另一个问题，如果我从该组件获得某种用户确认（如果它是确认对话框而不是简单通知），则使用此解决方案处理起来不是很方便。

另一种解决方案是手动渲染组件。比如：

notify(props) {
  const wrapper = document.body.appendChild(document.createElement('div'))
  const component = ReactDOM.render(React.createElement(Notification, props), wrapper)
  //...
  // return Promise or component itself
}

所以我会这样称呼：

notify({message: '...'})
  .then(...)

或：

notify({message: '...', onConfirm: ...})

这个解决方案看起来很老套，我想让 React 处理渲染，而且我还有一个额外的不必要的 div。此外，如果 React API 发生变化，我的代码也会中断。

这种情况的最佳做法是什么？也许我错过了一些完全不同的东西？

Answer 1

您可以为此使用React Context。

您在应用程序的高级别创建 React 上下文，然后将值关联到它。这应该允许组件创建通知/与通知交互。

export const NotificationContext = React.createContext({
  notifications: [],
  createNotification: () => {}
});

class App extends Component {
  constructor() {
    super();

    this.state = {
      notifications: []
    };

    this.createNotification = this.createNotification.bind(this);
  }

  createNotification(body) {
    this.setState(prevState => ({
      notifications: [body, ...prevState.notifications]
    }));
  }

  render() {
    const { notifications } = this.state;

    const contextValue = {
      notifications,
      createNotification: this.createNotification
    };
    return (
      <NotificationContext.Provider value={contextValue}>
        <NotificationButton />
        {notifications.map(notification => (
          <Notification body={notification} />
        ))}
      </NotificationContext.Provider>
    );
  }
}

通知存储在一个数组中，以便一次允许多个通知。目前，此实现永远不会删除它们，但可以添加此功能。

要创建通知，您将在应用程序中使用相应的上下文使用者。为了演示，我在这里添加了一个简单的实现。

import { NotificationContext } from "./App.jsx";

const NotificationButton = () => (
  <NotificationContext.Consumer>
    {({ notifications, createNotification }) => (
      <button onClick={() => createNotification(notifications.length)}>
        Add Notification
      </button>
    )}
  </NotificationContext.Consumer>
);

You can view the working example here.