将同一组件的功能分离到不同的文件中

Question

假设我有一个页面 form.js 在 NEXT.JS 上运行

import "..." ...

export default function Form() {
    const [page, setPage] = useState(0);
    const [form, setForm] = useState({name: 'John', lastname: 'Doe'})

    return (
        <>
            {page === 0 && step_name() }
            {page === 1 && step_lastname() }
        </>
    ); 

    function step_name() {
        return ( 
          <div> 
              <input name="Name" placeholder="Enter your name" onSubmit={setForm({name: e.target.value})}/>
          </div>
        );
    }

    ....
}

如何将函数step_name() 分离到一个单独的文件中，而不是一个页面。我需要一个“帮助”文件来存储所有渲染函数并且还可以访问组件状态。

我没有找到关于如何在 NEXTJS 上执行此操作的文档。

Answer 1

您需要对step_name 函数进行一些调整，以便可以访问setForm 函数。

1. 创建要从中导入函数的新文件
2. 导出新函数

    export function step_name(setForm) {
        return ( 
          <div> 
              <input name="Name" placeholder="Enter your name" onSubmit={setForm({name: e.target.value})}/>
          </div>
        );
    }

1. 返回原始文件导入函数

import { step_name } from './helpers'

4. 更新您的返回函数以传递正确的参数

   return (
       <>
           {page === 0 && step_name(setForm) }
           {page === 1 && step_lastname() }
       </>
   );