如何在不编写相同代码两次的情况下将我的代码分成两部分？

Question

下面给出的代码由“两部分”组成：

定义所有状态和处理程序的地方，
屏幕上显示的代码部分。

我发现代码对于一个文件来说可能太大了。我的问题是如何将给定的代码分成两部分？

例如一个文件包含第一部分（从上面），另一个文件包含第二部分（也从上面）。

import { useState } from "react";
import './style.css';

export default function UserInput() {
  const [person,setPerson] = useState({firstName:'',age:''});
  const [people,setPeople] = useState([]);

  const handleChange = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setPerson({...person, [name]: value});
  }
  const handleSubmit = (e) => {
    e.preventDefault();
    if(person.firstName && person.age){
      const newPerson = {...person,id: new Date().getDate().toString()}
      setPeople([...people,newPerson]);
      setPerson({firstName:'',age:''});
    }
    else{
      console.log('Empty field!')
    }
  }

  const handleDelete = () => {
    setPeople([]);
    setPerson({firstName:'',age:''});
  }

  return(
    <>
      <form className='container' autoComplete="off">
        <div>
          <label htmlFor='firstName' className='label'>Name: </label>
          <input type='text' className='input' id='firstName' name='firstName' value={person.firstName} onChange={handleChange}/> <br/>
          <label htmlFor='age' className='label'>Age: </label>
          <input type='text' className='input-age' id='age' name='age' value={person.age} onChange={handleChange}/> <br/>
          <button className= 'btn' type='submit' onClick={handleSubmit}>Add</button>
          <button className= 'btn' type='button' onClick={handleDelete}>Clear</button>
        </div>
      </form>

      {
        people.map((person)=>{
          return(
            <div className='list' key={person.id}>
              {person.firstName}, {person.age}
            </div>
          )
        })
      }
    </>
  );
}

Answer 1

我认为你应该将代码放在 3 个文件中：

input.js:

export default Input = props => {
    const { name, label, value, setPerson } = props;
    const handleChange = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        setPerson(person => {...person, [name]: value});
    }
    return (
        <>
            <label htmlFor={name} className='label'>{label}: </label>
            <input type='text' className='input' id={name} name={name} value={value} onChange={handleChange}/> <br/>
        </>
    );
}

people.js

const People = props => {
    const { data } = props;
    
    return (
        <>
            {
                 data.map(person=>(
                    <div className='list' key={person.id}>
                        {person.firstName}, {person.age}
                    </div>  
                 ))
            }
        </>
    );
}

主文件：

import { useState } from "react";
import Input from './input';
import People from './people';
import './style.css';

export default function UserInput() {

    const [person,setPerson] = useState({firstName:'',age:''});
    const [people,setPeople] = useState([]);

    const handleSubmit = (e) => {
        e.preventDefault();
        if(person.firstName && person.age){
            const newPerson = {...person,id: new Date().getDate().toString()}
            setPeople([...people,newPerson]);
            setPerson({firstName:'',age:''});
        }else{
            console.log('Empty field!')
        }
    }

    const handleDelete = () => {
        setPeople([]);
        setPerson({firstName:'',age:''});
    }

    return(
        <>
            <form className='container' autoComplete="off">
                <div>
                    <Input name="firstName" label="Name" value={person.firstName} setPerson={setPerson} />
                    <Input name="age" label="Age" value={person.age} setPerson={setPerson} />
                    <button className= 'btn' type='submit' onClick={handleSubmit}>Add</button>
                    <button className= 'btn' type='button' onClick={handleDelete}>Clear</button>
                </div>  
            </form>  

            <People data={people} />
        </>
    )
}

如何在不编写相同代码两次的情况下将我的代码分成两部分？

How can I split my code into two parts without writting the same code twice?

split

reactjs

use-state