1.编写程序，实现如下功能： 1)使用单文件组件定义一个投票选项 2)每个选项上有人物，名称和票数。 3)点击按钮时票数加1，且下方显示投票实时纪录，效果如下图。 提示：选项定义为一个组件

为了实现这个功能，你可以使用JavaScript和HTML结合React库来构建一个简单的投票系统。这里是一个基本步骤的概述：

1. 首先，创建一个新的React项目。如果你还没有安装，可以使用`create-react-app`命令初始化：

   npx create-react-app voting-app
   cd voting-app

2. 定义一个名为`VoteOption.js`的单文件组件，它将包含人物、名称和票数：

   // VoteOption.js
   import React from 'react';

   const VoteOption = ({ name, person, votes }) => {
     return (
       <div>
         <h3>{person}</h3>
         <p>Name: {name}</p>
         <button onClick={() => incrementVotes(votes)}>Vote</button>
         <p>Tickets: {votes}</p>
       </div>
     );
   };

   const incrementVotes = (currentVotes) => {
     return currentVotes + 1;
   };

   export default VoteOption;

3. 在`App.js`中，初始化并渲染投票选项列表：

   // App.js
   import React, { useState } from 'react';
   import VoteOption from './VoteOption';

   function App() {
     const [options, setOptions] = useState([
       { name: 'Option 1', person: 'Person A', votes: 0 },
       { name: 'Option 2', person: 'Person B', votes: 0 },
       // 添加更多选项...
     ]);

     const handleIncrementVotes = (index) => {
       const updatedOptions = [...options];
       updatedOptions[index].votes = incrementVotes(updatedOptions[index].votes);
       setOptions(updatedOptions);
     };

     return (
       <div className="container">
         {options.map((option, index) => (
           <VoteOption
             key={index}
             name={option.name}
             person={option.person}
             votes={option.votes}
             onClick={() => handleIncrementVotes(index)}
           />
         ))}
       </div>
     );
   }

   export default App;

4. 最后，在CSS文件（如`styles.css`)中添加样式，以便于展示清晰的效果。

完成以上步骤后，当你运行应用程序，你会看到一个包含投票选项的列表，每次点击按钮时，相应的票数会增加，并实时更新在该选项下面。