Reactjs 重构（抽象）大型组件，使其更易于阅读（反应）

我正在寻找一种优雅的方式来构造我的大型表单组件我的代码大致如下例所示

这对我来说并不容易理解，虽然我知道这个问题是一个人如何喜欢工作的主观因素，但我想知道如何将这个部分分解为更清晰的部分

理想情况下，我希望将单个组件中的函数拆分为单独的组件。我正在使用我自己的一个项目中的一个粗略示例，以便更好地理解这种重构的最佳实践

如您所见，onSubmit表单被编程为呈现代码并下载代码。表单从多个输入中获取状态，用于创建一个更新的HTML文件，该文件将使用Result函数返回

现在，这不是工作代码，而是我的组件中涉及的所有函数的一个粗略示例。-代码段将不会运行，因为正在调用ReactDomServer以使用renderToStaticMarkup将输出下载为HTML文件，而这在代码段中不可用

提前感谢您在简化过程中提供的任何帮助

功能结果（道具）{
const{image，title，bodyText，btnText，btnUrl，btnColor}=props；
返回{
this.setState（{[e.target.name]：e.target.value}）；
};
handleSubmit=e=>{
e、 预防默认值（）；
this.setState（{submitted:true}）；
这个.generateHtmlFile（）；
};
generateHtmlFile=（）=>{
const{name，age}=this.state；
const formHtml=ReactDomServer.renderToStaticMarkup(
);
const resultHtml=ReactDomServer.renderToStaticMarkup(
);
下载（'result.html'，resultHtml）；
下载（'form.html'，formHtml）；
};
render（）{
const{name，age，submitted}=this.state；
返回(
名称：{'}




年龄：{'}






{已提交？：null}
);
}
}
render（，document.body）

表单最终看起来像一堆乱七八糟的东西，它们通常是任何React应用程序中最丑陋的部分。我建议将所有组件分解为单独的功能组件文件，并将它们存储在父组件之外的另一个文件夹中。使用全局存储（如Redux或Context API）存储值，并在父组件外部分派和运行类似Submit的函数。另外，尽可能地分离和重复使用各种表单的渲染逻辑，导入JSX是最简单的部分。您熟悉CreateReact应用程序吗？如果不是的话，我建议你关注这个问题，并在网上学习一些基础课程。如果您愿意，我很高兴与您分享一些帮助我的资源。@dandmcd感谢您提供的提示。你有没有一个很好的例子，可以将Showcase上下文用于具有多个功能的表单，比如这样的表单？@AdamHinckley我对CRA很熟悉，目前正在使用Gatsby来表示这种表单。你知道关于我的问题有什么教训吗？我看过一些使用抽象的教程，但是，我没有看到任何与我的表单示例相匹配的教程。@Dr.Tenma感谢分享更多的上下文。我对盖茨比只涉猎了一点点。为什么要使用
危险的LysetinerHTML
？此外，如果你有一个链接到回购协议，我们可以看看，这将是有益的。