可以多次创建的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>
);

您可以在此处查看工作示例。