溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
獲取短信驗證碼
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
登 錄 注冊有禮
云服務器 香港服務器 高防服務器
最新更新 網站標簽 地圖導航
產品

怎么用react實現消息顯示器

發布時間：2022-08-26 10:12:35 來源：億速云 閱讀：142 作者：iii 欄目：開發技術

怎么用React實現消息顯示器

在現代Web應用程序中，消息顯示器是一個常見的功能。它可以用于顯示通知、聊天消息、系統日志等。React強大的前端庫，提供了構建用戶界面的靈活性和高效性。本文將詳細介紹如何使用React實現一個消息顯示器，涵蓋從基礎概念到高級功能的實現。

目錄

  1. 項目初始化
  2. 組件結構設計
  3. 消息顯示器的基本實現
  4. 消息的添加與刪除
  5. 消息的樣式與動畫
  6. 消息的持久化
  7. 消息的過濾與搜索
  8. 消息的通知功能
  9. 性能優化
  10. 總結

項目初始化

首先，我們需要創建一個新的React項目。如果你還沒有安裝create-react-app，可以通過以下命令安裝：

npm install -g create-react-app

然后，創建一個新的React項目：

npx create-react-app message-display
cd message-display

接下來，啟動開發服務器：

npm start

現在，你已經有了一個基本的React項目結構。

組件結構設計

在實現消息顯示器之前，我們需要設計組件的結構。一個典型的消息顯示器可能包含以下組件：

  1. MessageDisplay: 主組件，負責管理消息的狀態和邏輯。
  2. MessageList: 顯示消息列表的組件。
  3. MessageItem: 顯示單個消息的組件。
  4. MessageInput: 輸入新消息的組件。
  5. MessageFilter: 過濾消息的組件。

我們將逐步實現這些組件。

消息顯示器的基本實現

1. 創建MessageDisplay組件

首先，我們創建一個MessageDisplay組件，它將作為消息顯示器的主組件。

import React, { useState } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';

const MessageDisplay = () => {
  const [messages, setMessages] = useState([]);

  const addMessage = (text) => {
    const newMessage = {
      id: Date.now(),
      text,
      timestamp: new Date().toLocaleTimeString(),
    };
    setMessages([...messages, newMessage]);
  };

  return (
    <div className="message-display">
      <MessageList messages={messages} />
      <MessageInput addMessage={addMessage} />
    </div>
  );
};

export default MessageDisplay;

2. 創建MessageList組件

MessageList組件負責顯示消息列表。

import React from 'react';
import MessageItem from './MessageItem';

const MessageList = ({ messages }) => {
  return (
    <div className="message-list">
      {messages.map((message) => (
        <MessageItem key={message.id} message={message} />
      ))}
    </div>
  );
};

export default MessageList;

3. 創建MessageItem組件

MessageItem組件負責顯示單個消息。

import React from 'react';

const MessageItem = ({ message }) => {
  return (
    <div className="message-item">
      <span className="message-text">{message.text}</span>
      <span className="message-timestamp">{message.timestamp}</span>
    </div>
  );
};

export default MessageItem;

4. 創建MessageInput組件

MessageInput組件負責輸入新消息。

import React, { useState } from 'react';

const MessageInput = ({ addMessage }) => {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim()) {
      addMessage(inputValue);
      setInputValue('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Enter a message"
      />
      <button type="submit">Send</button>
    </form>
  );
};

export default MessageInput;

5. 使用MessageDisplay組件

最后，在App.js中使用MessageDisplay組件。

import React from 'react';
import MessageDisplay from './MessageDisplay';

function App() {
  return (
    <div className="App">
      <MessageDisplay />
    </div>
  );
}

export default App;

現在，你已經實現了一個基本的消息顯示器。用戶可以輸入消息，消息會顯示在列表中。

消息的添加與刪除

1. 添加消息

我們已經實現了消息的添加功能。用戶可以通過MessageInput組件輸入消息，消息會被添加到MessageDisplay組件的messages狀態中。

2. 刪除消息

接下來，我們實現消息的刪除功能。我們可以在MessageItem組件中添加一個刪除按鈕，并在MessageDisplay組件中處理刪除邏輯。

首先，修改MessageItem組件：

import React from 'react';

const MessageItem = ({ message, deleteMessage }) => {
  return (
    <div className="message-item">
      <span className="message-text">{message.text}</span>
      <span className="message-timestamp">{message.timestamp}</span>
      <button onClick={() => deleteMessage(message.id)}>Delete</button>
    </div>
  );
};

export default MessageItem;

然后，修改MessageList組件：

import React from 'react';
import MessageItem from './MessageItem';

const MessageList = ({ messages, deleteMessage }) => {
  return (
    <div className="message-list">
      {messages.map((message) => (
        <MessageItem key={message.id} message={message} deleteMessage={deleteMessage} />
      ))}
    </div>
  );
};

export default MessageList;

最后，在MessageDisplay組件中添加刪除邏輯：

import React, { useState } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';

const MessageDisplay = () => {
  const [messages, setMessages] = useState([]);

  const addMessage = (text) => {
    const newMessage = {
      id: Date.now(),
      text,
      timestamp: new Date().toLocaleTimeString(),
    };
    setMessages([...messages, newMessage]);
  };

  const deleteMessage = (id) => {
    setMessages(messages.filter((message) => message.id !== id));
  };

  return (
    <div className="message-display">
      <MessageList messages={messages} deleteMessage={deleteMessage} />
      <MessageInput addMessage={addMessage} />
    </div>
  );
};

export default MessageDisplay;

現在，用戶可以刪除消息了。

消息的樣式與動畫

1. 添加樣式

我們可以為消息顯示器添加一些基本的樣式。在src目錄下創建一個styles.css文件，并添加以下樣式：

.message-display {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.message-list {
  margin-bottom: 20px;
}

.message-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.message-item:last-child {
  border-bottom: none;
}

.message-text {
  flex: 1;
  margin-right: 10px;
}

.message-timestamp {
  font-size: 0.8em;
  color: #666;
}

button {
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #ff1a1a;
}

form {
  display: flex;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

button[type="submit"] {
  background-color: #4caf50;
}

button[type="submit"]:hover {
  background-color: #45a049;
}

然后，在App.js中引入樣式文件：

import React from 'react';
import MessageDisplay from './MessageDisplay';
import './styles.css';

function App() {
  return (
    <div className="App">
      <MessageDisplay />
    </div>
  );
}

export default App;

2. 添加動畫

我們可以使用react-transition-group庫為消息添加動畫效果。首先，安裝react-transition-group：

npm install react-transition-group

然后，修改MessageList組件以支持動畫：

import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import MessageItem from './MessageItem';
import './styles.css';

const MessageList = ({ messages, deleteMessage }) => {
  return (
    <TransitionGroup className="message-list">
      {messages.map((message) => (
        <CSSTransition key={message.id} timeout={300} classNames="message">
          <MessageItem message={message} deleteMessage={deleteMessage} />
        </CSSTransition>
      ))}
    </TransitionGroup>
  );
};

export default MessageList;

接下來，在styles.css中添加動畫樣式：

.message-enter {
  opacity: 0;
  transform: translateY(-20px);
}

.message-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.message-exit {
  opacity: 1;
  transform: translateY(0);
}

.message-exit-active {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 300ms, transform 300ms;
}

現在，當消息被添加或刪除時，會有平滑的動畫效果。

消息的持久化

為了讓消息在頁面刷新后仍然存在，我們可以將消息存儲在瀏覽器的localStorage中。

1. 保存消息到localStorage

首先，修改MessageDisplay組件以保存消息到localStorage：

import React, { useState, useEffect } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';

const MessageDisplay = () => {
  const [messages, setMessages] = useState(() => {
    const savedMessages = localStorage.getItem('messages');
    return savedMessages ? JSON.parse(savedMessages) : [];
  });

  useEffect(() => {
    localStorage.setItem('messages', JSON.stringify(messages));
  }, [messages]);

  const addMessage = (text) => {
    const newMessage = {
      id: Date.now(),
      text,
      timestamp: new Date().toLocaleTimeString(),
    };
    setMessages([...messages, newMessage]);
  };

  const deleteMessage = (id) => {
    setMessages(messages.filter((message) => message.id !== id));
  };

  return (
    <div className="message-display">
      <MessageList messages={messages} deleteMessage={deleteMessage} />
      <MessageInput addMessage={addMessage} />
    </div>
  );
};

export default MessageDisplay;

2. 從localStorage加載消息

在上面的代碼中，我們使用useEffect鉤子將消息保存到localStorage中。當組件首次加載時，我們從localStorage中讀取消息并初始化狀態。

現在，即使頁面刷新，消息也會被保留。

消息的過濾與搜索

1. 添加過濾功能

我們可以添加一個過濾功能，允許用戶根據消息內容過濾消息。首先，創建一個MessageFilter組件：

import React, { useState } from 'react';

const MessageFilter = ({ filterMessages }) => {
  const [filterText, setFilterText] = useState('');

  const handleFilterChange = (e) => {
    setFilterText(e.target.value);
    filterMessages(e.target.value);
  };

  return (
    <div className="message-filter">
      <input
        type="text"
        value={filterText}
        onChange={handleFilterChange}
        placeholder="Filter messages"
      />
    </div>
  );
};

export default MessageFilter;

然后，在MessageDisplay組件中添加過濾邏輯：

import React, { useState, useEffect } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';
import MessageFilter from './MessageFilter';

const MessageDisplay = () => {
  const [messages, setMessages] = useState(() => {
    const savedMessages = localStorage.getItem('messages');
    return savedMessages ? JSON.parse(savedMessages) : [];
  });
  const [filteredMessages, setFilteredMessages] = useState(messages);

  useEffect(() => {
    localStorage.setItem('messages', JSON.stringify(messages));
    setFilteredMessages(messages);
  }, [messages]);

  const addMessage = (text) => {
    const newMessage = {
      id: Date.now(),
      text,
      timestamp: new Date().toLocaleTimeString(),
    };
    setMessages([...messages, newMessage]);
  };

  const deleteMessage = (id) => {
    setMessages(messages.filter((message) => message.id !== id));
  };

  const filterMessages = (text) => {
    setFilteredMessages(messages.filter((message) => message.text.includes(text)));
  };

  return (
    <div className="message-display">
      <MessageFilter filterMessages={filterMessages} />
      <MessageList messages={filteredMessages} deleteMessage={deleteMessage} />
      <MessageInput addMessage={addMessage} />
    </div>
  );
};

export default MessageDisplay;

2. 添加搜索功能

我們還可以添加一個搜索功能，允許用戶搜索消息。我們可以使用MessageFilter組件來實現這一點。只需在MessageFilter組件中添加一個搜索按鈕，并在MessageDisplay組件中處理搜索邏輯。

消息的通知功能

1. 添加通知功能

我們可以使用瀏覽器的Notification API來顯示消息通知。首先，檢查瀏覽器是否支持Notification API：

import React, { useState, useEffect } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';
import MessageFilter from './MessageFilter';

const MessageDisplay = () => {
  const [messages, setMessages] = useState(() => {
    const savedMessages = localStorage.getItem('messages');
    return savedMessages ? JSON.parse(savedMessages) : [];
  });
  const [filteredMessages, setFilteredMessages] = useState(messages);

  useEffect(() => {
    localStorage.setItem('messages', JSON.stringify(messages));
    setFilteredMessages(messages);
  }, [messages]);

  const addMessage = (text) => {
    const newMessage = {
      id: Date.now(),
      text,
      timestamp: new Date().toLocaleTimeString(),
    };
    setMessages([...messages, newMessage]);

    if (Notification.permission === 'granted') {
      new Notification('New Message', {
        body: text,
      });
    } else if (Notification.permission !== 'denied') {
      Notification.requestPermission().then((permission) => {
        if (permission === 'granted') {
          new Notification('New Message', {
            body: text,
          });
        }
      });
    }
  };

  const deleteMessage = (id) => {
    setMessages(messages.filter((message) => message.id !== id));
  };

  const filterMessages = (text) => {
    setFilteredMessages(messages.filter((message) => message.text.includes(text)));
  };

  return (
    <div className="message-display">
      <MessageFilter filterMessages={filterMessages} />
      <MessageList messages={filteredMessages} deleteMessage={deleteMessage} />
      <MessageInput addMessage={addMessage} />
    </div>
  );
};

export default MessageDisplay;

2. 請求通知權限

在上面的代碼中，我們首先檢查用戶是否已經授予通知權限。如果沒有，我們會請求權限。如果用戶授予權限，我們將顯示通知。

性能優化

1. 使用React.memo

我們可以使用React.memo來優化MessageItem組件的性能，避免不必要的重新渲染。

import React from 'react';

const MessageItem = React.memo(({ message, deleteMessage }) => {
  return (
    <div className="message-item">
      <span className="message-text">{message.text}</span>
      <span className="message-timestamp">{message.timestamp}</span>
      <button onClick={() => deleteMessage(message.id)}>Delete</button>
    </div>
  );
});

export default MessageItem;

2. 使用useCallback

我們可以使用useCallback來優化deleteMessage函數的性能，避免不必要的重新創建。

”`jsx import React, { useState, useEffect, useCallback } from ‘react’; import MessageList from ‘./MessageList’; import MessageInput from ‘./MessageInput’; import MessageFilter from ‘./MessageFilter’;

const MessageDisplay = () => { const [messages, setMessages] = useState(() => { const savedMessages = localStorage.getItem(‘messages’); return savedMessages ? JSON.parse(savedMessages) : []; }); const [filteredMessages, setFilteredMessages] = useState(messages);

useEffect(() => { localStorage.setItem(‘messages’, JSON.stringify(messages)); setFilteredMessages(messages); }, [messages]);

const addMessage = (text) => { const newMessage = { id: Date.now(), text, timestamp: new Date().toLocaleTimeString(), }; setMessages([…messages, newMessage]);

if (Notification.permission === 'granted') {
  new Notification('New Message', {
    body: text,
  });
} else if (Notification.permission !== 'denied') {
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      new Notification('New Message', {
        body: text,
      });
    }
  });
}

};

const deleteMessage = useCallback((id) => { setMessages((prevMessages) => prevMessages.filter((message) => message.id !== id)); }, []);

const filterMessages = (text) => { setFilteredMessages(messages.filter((message) => message.text.includes(text))); };

return (

向AI問一下細節
推薦閱讀：
  1. React組件怎么用
  2. react-refetch怎么用

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

react

猜你喜歡

最新資訊
相關推薦

相關標簽

reactjs react-devtools react-native reactor react生命周期 react native react.js react hook reactnative reactive create-react-app react-redux react-navigation react16 react-bootstrap react組件 react hooks react-router c++模板 提速
AI
助
手
產品服務
地區劃分
專題活動
幫助支持
關于我們
售后咨詢
7*24小時在線電話：400-100-2938
7*24小時在線 QQ：800811969
關注億速云

億速云公眾號

手機網站二維碼

Copyright ? Yisu Cloud Ltd. All Rights Reserved. 2018 版權所有

廣州億速云計算有限公司粵ICP備17096448號-1 粵公網安備 44010402001142號增值電信業務經營許可證編號：B1-20181529

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女