怎么给chatgpt粘贴大量代码 ChatGPT 写前端代码行不行，结果让我震惊

默认分类1年前 (2023)发布 admin

1,539 0 0

转载说明：原创不易，未经授权，谢绝任何形式的转载

我尽了全力，唤醒了写代码的能力

介绍

听起来好得令人难以置信，所以让我们让它为我们编写一些 JS 代码。我想看看它是否可以解决我作为前端开发人员每天所做的任务。

是驴子是马拉出来溜溜，我们还是直接进入主题一探究竟。

在 React 中构建弹出框组件模板

虽然这是可能的，但我们不要通过添加一些代码来开始这个实验。让我们简单地要求创建两个 React 组件，这两个组件将成为弹出窗的元素和一个切换其可见性的按钮，一开始我是这么问的：

单独创建一个只有按钮()的React函数组件的文件，其名字是。然后再单独创建一个叫 Modal 的函数组件文件，有个 div 在 Modal 函数组件里。

结果把我没有提及到的功能，弹出事件也写出来了，实在令我震惊！

大家看完以上截图是不是震惊？但是我不想让他这样实现我还未说的功能，我修改了创建代码的指令，修改如下：

单独创建一个只有按钮()的React函数组件的文件，其名字是。然后再单独创建一个叫 Modal 的函数组件文件，有个 div 在 Modal 函数组件里。暂时不要包含事件，只是组件样式而已。

这个简单的任务完成得很完美！请注意它如何主动向 HTML 元素添加一些内容，因为它清楚地了解它们的用途。更不用说底部的文字小注释很有帮助！

添加数据状态和事件

接下来，让我们直接进入一个复杂的任务，并要求它添加必要的功能以使按钮打开弹出框，我是这样给他修改组件代码指令的：

能否修改这些组件代码，让组件打开 Modal 组件弹出框呢

再次，执行是完美的！添加了必要的状态、点击事件侦听器和处理程序，以便所有这些都能正常工作。并且超额完成了任务，多实现了一个关闭弹出框的功能，我的指令并没有提及，看来他是个完美主义者。它给出的解释是还是十分完美的。我觉得这对初学者来说是一个很好的学习工具，因为它不仅可以满足您的要求，而且可以清楚地解释它。显然，在任何时候您都可以选择提出更多问题。

新建一个父组件

接下来，我们需要将这两个单独的组件，放到父组件，现在我们可以这样告诉让他们帮我们写一个父组件，指令提示语如下：

能否修改代码，将这两个组件引入组件里，方便我使用

怎么给chatgpt粘贴大量代码 ChatGPT 写前端代码行不行，结果让我震惊

没错，这个任务也是十分完美的完成了，而且文字注释我十分满意，到这里，你的感觉如何呢。

添加本地存储

接下来，我们提升门槛，让他完成更复杂的任务，测试它是否可以修改代码并将模态的状态保存在本地存储中。这允许我们即使在浏览器窗口关闭后也能保存模式的状态。接下来我给如下提示语：

能否修改下组件的代码，将数据状态存储到本地缓存里()？

执行再次完美，它正确地将布尔值转换为字符串，它也向我们解释了为什么它必须在代码中使用，这显然不仅仅是文档中的一般复制粘贴，解释是用我们在代码中的确切变量名称来帮助理解的，我简直不太详细这是个机器人完成的，再次刷新了我的认知。

添加样式和动画

好吧，让我们看看它是否可以与 CSS 和动画一起使用，我认为这对 AI 来说会更棘手一些，第一次我是这么问的：

你能否帮我添加一些 css 动画效果代码呢，当我们点击组件，让 Modal 的显示和隐藏效果更自然些。

这段代码不仔细看，你以为它写对了，也会打盹，一不小心也会糊弄过关，虽然乍一看是对的，但是父组件这样写，我们并没有在样式文件里定义 open 和 close ，其实在 open 和 close 加上这两个样式，本案例就完整了，还把本地缓存的逻辑搞丢了，但是我犯懒，不想自己写，继续让 AI 帮我改完吧, 看看能否满意。

接下来我下达修改的提示指令，看看他行不行，我是这样命令的：

请修复下样式文件，还有你把本地缓存的逻辑搞丢了，请修复你的代码

到这里算是修复的让我满意，大家是否满意呢？看来AI也是会犯错的，需要人去辅助。

改成版本的组件

接下来我们继续提高写代码的难度，让其将组件的代码改成版本的，看看他能否完成呢，我给了以下提示语：

你好，你能将上述组件的代码给出版本的组件吗，请完整写出所有组件的代码

由于截图问题，不能完整截图，我这里把最终完整的代码贴出来，大家一起帮忙来挑错，目前我没发现问题，实在另外哇塞，感觉我有魔法，让完成我的魔法，很有成就感。

// ModalOpen.tsx
import React from 'react';
interface ModalOpenProps {
  onClick: () => void;
}
const ModalOpen: React.FC = ({ onClick }) => (
  
);
export default ModalOpen;


// Modal.tsx
import React from 'react';
import './styles.css';
interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
}
const Modal: React.FC = ({ isOpen, onClose }) => (
  
    
    Modal content goes here
  
);
export default Modal;

怎么给chatgpt粘贴大量代码 ChatGPT 写前端代码行不行，结果让我震惊

// ParentComponent.tsx
import React, { useState, useEffect } from 'react';
import ModalOpen from './ModalOpen';
import Modal from './Modal';
const ParentComponent: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  useEffect(() => {
    const storedValue = localStorage.getItem('isModalOpen');
    if (storedValue) {
      setIsModalOpen(JSON.parse(storedValue));
    }
  }, []);
  useEffect(() => {
    localStorage.setItem('isModalOpen', JSON.stringify(isModalOpen));
  }, [isModalOpen]);
  return (
    
       setIsModalOpen(true)} />
       setIsModalOpen(false)} />
    
  );
};
export default ParentComponent;

// styles.css
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out;
}
.modal.open {
  opacity: 1;
  visibility: visible;
}
.modal.close {
  opacity: 0;
  visibility: hidden;
}
.modal p {
  background: white;
  padding: 1rem;
  border-radius: 0.5rem;
}

增加列表数据需求

接下来我们继续增加需求，在 Modal 组件里，增加一些属性，比如显示用户的姓名和头像。我是这样给提示语的：

你好，你能基于改写的版本里，修改Modal 组件代码，在 Modal 组件里定义如下属性：, ,,，这些属性都是字符串类型的，并在 Modal 组件里显示这些属性的内容。

import React from 'react';
import './Modal.css';
interface ModalProps {
  firstName: string;
  lastName: string;
  profession: string;
  profilePhoto: string;
  isOpen: boolean;
  onClose: () => void;
}
const Modal: React.FC = ({firstName, lastName, profession, profilePhoto, isOpen, onClose}) => {
  return (
    
      
        ×
        First Name: {firstName}
        Last Name: {lastName}
        Profession: {profession}
        Profile Photo: {profilePhoto}
      
    
  );
};
export default Modal;

完美的！完全没有错误，但我的指示很清楚。我们知道它可以理解变量背后的含义，所以我怀疑它能够找出所需的类型（我们稍后会验证这一点）。像往常一样，我们得到了详细的解释，但它并不那么有趣，所以让我们继续前进。

你好，你能继续在 Modal 组件里，增加一个的对象数组属性吗，其结构如下 {:; :; :}，修改完成后，请以表格的形式展现属性的数据，继续这些需求，请修改 Modal 组件代码

完成后的截图如，代码有点长，只截图部分：

完整的代码如下，大家一起评审下，看看有啥问题吗，我暂时没发下，只能说不错完美。

import React, { useState } from 'react';
interface Props {
  firstName: string;
  lastName: string;
  profession: string;
  profilePhoto: string;
  isOpen: boolean;
  onClose: () => void;
  hobbies: { nameOfHobby: string; experienceInYears: number; activelyDoing: boolean }[];
}
const Modal: React.FC = (props) => {
  const {
    firstName,
    lastName,
    profession,
    profilePhoto,
    isOpen,
    onClose,
    hobbies,
  } = props;
  return (
    
      
      
        
        
          
            {firstName} {lastName}
          
          Profession: {profession}
        
      
      
          {hobbies.map((hobby, index) => (
            
          ))}
        
        
          
            Hobby
            Experience (in Years)
            Actively Doing?
          
        
        
              {hobby.nameOfHobby}
              {hobby.experienceInYears}
              {hobby.activelyDoing ? 'Yes' : 'No'}
            
      
    
  );
};
export default Modal;

Hobby	Experience (in Years)	Actively Doing?
{hobby.nameOfHobby}	{hobby.experienceInYears}	{hobby.activelyDoing ? 'Yes' : 'No'}

您能看到它如何增加爱好，经验（年）以及目前在桌子标题上做的吗？而且它还理解，输出积极的布尔值，将其转换为“是”或“否”。实在令人经验，让我感觉到有压力了。

引入第三方库

接下来，让我们看看它是否可以按字母顺序对我们的爱好对象进行排序，并可能使用外部库来解决该问题，我是这样给他提示语的：

你好，在完成的 Modal 组件里，我想针对对象数组进行排序，依据属性，你可以引入第三方库，请修改 Modal 组件代码

完成的代码：

import React from 'react';
import { string, number, boolean, arrayOf } from 'prop-types';
import { sortBy } from 'lodash';
interface Hobby {
  nameOfHobby: string;
  experienceInYears: number;
  activelyDoing: boolean;
}
interface Props {
  firstName: string;
  lastName: string;
  profession: string;
  profilePhoto: string;
  hobbies: Hobby[];
  isOpen: boolean;
  onClose: () => void;
}
const Modal: React.FC = (props) => {
  const { firstName, lastName, profession, profilePhoto, hobbies, isOpen, onClose } = props;
  const sortedHobbies = sortBy(hobbies, ['nameOfHobby']);
  return (
    
      
        {firstName} {lastName}
        {profession}
        
      
      
        Hobbies:
        
            {sortedHobbies.map((hobby) => (
              
            ))}
          
          
            
              Name of Hobby
              Experience in Years
              Actively Doing
            
          
          
                {hobby.nameOfHobby}
                {hobby.experienceInYears}
                {hobby.activelyDoing ? 'Yes' : 'No'}
              
        
      
      
        
      
    
  );
};
Modal.propTypes = {
  firstName: string.isRequired,
  lastName: string.isRequired,
  profession: string.isRequired,
  profilePhoto: string.isRequired,
  hobbies: arrayOf(
    shape({
      nameOfHobby: string.isRequired,
      experienceInYears: number.isRequired,
      activelyDoing: boolean.isRequired,
    }),
  ).isRequired,
  isOpen: boolean.isRequired,
  onClose: func.isRequired,
};
export default Modal;