根據渲染外部條件調用 React toastify

Question

我正在嘗試在 react 中創建一個通知系統，我使用react-toastify系統

到目前為止，我有一個連接到我的服務器的套接字連接（使用socket.io ），只要發生通知，它就會向客戶端發送響應。

const {endpoint} = this.state
            const socket = socketIOClient(endpoint);
            console.log("created")
            socket.on('updatelogs', data =>
            this.setState({logs: data}, 
            () => createNotification(data.pop().log.level, data.pop().log.message))) // here i use a callback to create the notification
          }

我有一個日志系統，我將最后一個添加到堆棧中的log並根據其中的屬性傳遞它。

在我的createNotficiation function 里面我有一些像這樣的虛擬邏輯。

export const createNotification = (level, message) =>{ 
    switch (level) {
            case 'info':
              return toast('info')
            case 'success':
              return toast("success");
            case 'warning':
              return toast("warning");
            case 'error':
              return toast("error");
          }
        }

在這里，我想根據傳入的內容調用toast ，但沒有渲染。 我嘗試了一個簡單的alert ，效果很好。

這是我的吐司配置

App.js內部：

  render() {
    toast.configure();
    return (
      <div className="App">
          <NewComponent
          name={this.state.name} handleChange={this.setNameHandler}
          preproccessHandler={this.setPreprocessHandler} isPreproccess={this.state.isProcessedData} 
          hasProcessedDBScan={this.state.isProcessedDBScan} setProcessedHandler={this.setProcessedHandler} 
          validateFileHandler={this.validateFileHandler}  isUploadedFiles={this.state.isUploadedFiles}/>
          <ToastContainer />
      </div>

Answer 1

嘗試渲染一個 div 而不是 toast，背景顏色為紅色，寬度為 200px。