React实现简单留言板

下面是一个使用React实现简单留言板的示例代码：

首先，创建一个MessageBoard组件：

import React, { useState } from 'react';

const MessageBoard = () => {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    setMessages([...messages, newMessage]);
    setNewMessage('');
  };

  return (
    <div>
      <h2>留言板</h2>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
        />
        <button type="submit">添加留言</button>
      </form>
    </div>
  );
};

export default MessageBoard;

然后，在你的主组件中使用MessageBoard组件：

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

const App = () => {
  return (
    <div>
      <h1>简单留言板</h1>
      <MessageBoard />
    </div>
  );
};

export default App;

这样，你就可以在App组件中渲染MessageBoard组件，并且可以添加新的留言到留言板上。

同样地，这只是一个简单的示例，没有使用任何数据持久化或复杂的状态管理。在实际的应用中，你可能需要使用更高级的状态管理库，如Redux或Mobx，以及与后端API交互来实现更完整的留言板功能。