使用手动硬编码的模板/组件的可视化构建器答案

【问题标题】：Visual builder to work with manually hard-coded templates/components使用手动硬编码的模板/组件的可视化构建器
【发布时间】：2022-10-08 00:03:06
【问题描述】：

我想知道，如果之前手动硬编码过 JS 组件（例如 React JSX），是否可以创建一个可视化的无代码构建器来处理它们？

让我解释一下我的意思。

假设一个简单的 React 组件 pages/index.js 以前由开发人员手动编写：

function HomePage() {
    return <div>Welcome to Next.js!</div>
}

export default HomePage

我们如何使用可视化构建器在前端更改这样的组件？

例如，我们想在现有的div 中添加一个新的 HTML 元素（例如 H1）。

据我了解，构建器首先需要知道 HTML 标记存储在哪个 JS 文件中以更新它。所以我们可以先将id="homepage" 添加到div，然后将关系存储为配置，例如

{"homepage": "pages/index.js"}

现在，如果我们在<div id="homepage"> 中添加一个新元素，构建器会将该元素添加到客户端的div 的DOM 中，然后获取div 的整个更新后的DOM 并写回文件index.js根据配置

好的，但该文件不仅包含 HTML 标记 - 它是 JS (React) 代码。

如何保留所有 JS 代码，例如function HomePage()、return、export default 等等？

作为一种选择，我们可以将所有 JS 代码单独加载为 HTML，包括非 HTML 代码作为#text 节点。然后更新 DOM 并将所有内容重新写入文件。

但这听起来很复杂，可能会导致意想不到的问题。

那么最好的解决方案是什么？

或者也许有现成的特定于 React 的解决方案？

或者，通过可视化构建器解析和重写手动硬编码的组件可能是一个坏主意，唯一的解决方案是将所有内容存储为 JSON，如"homepage":{"div", {"class":""}, "Welcome..."}，这样更容易重写？（但需要新的渲染）

【问题讨论】：

标签： javascript reactjs design-patterns architecture software-design

【解决方案1】：

这取决于

我非常相信您正在寻找的答案取决于您想要的灵活性水平你的no-code builder 有。

取决于此，您的项目可以受益于不同解决方案的权衡和优势。

让我们简要记住，基本上React 组件将需要一些道具，然后将通过渲染获取模板并输出一个工作的 HTML。这是假设您不需要更智能的反应组件的基本情况。此外，JSX 只是对函数调用的糖衣，因此您基本上可以编写函数以独立于使用 JSX 语法来输出 React 组件。因此无需声明 HTML，只需将 no-code tool 的输出更改为 JS 而不是 HTML。

例如，如果您可以修改no-code tool 的渲染方式，则可以指定在将元素移动到另一个元素时基本上：

高度灵活和可定制

在高度灵活的设置中，我将建议通过您编号的最后一个选项，具有数据驱动的 UI是复杂系统中最常见的情况。例如，Figma 可以选择将设计导出为 React 组件，您可以read how they do it here。基本上，他们从 figma 获取标签输出，这是标签的 JSON，并使用模板创建一些 React 组件。如果您定义“您拥有 UI 语言”，您可以很好地控制您可以构建哪些块并定义与它们交互的方式（例如，如果您知道道具及其内容，添加 img 组件可能非常容易需要渲染，然后为它创建一个 React 模板很容易）。限制：你需要很好地规划解析器的API以及不同项目集之间的交互。

简单的无代码生成器

对于更简单的场景，您可以使用您提到的第一种方法，您甚至不需要添加 id，像 React Developer Tools 这样的一些工具已经可以检查 VirtualDOM 以了解渲染的哪个部分属于哪个 React 元素（使用反应内部，这可能需要一些时间来理解，但例如，您可以在rendered 中检查他们如何使用data-reactid 进行识别）。知道了这一点，您已经可以为 render() 方法（因此 JSX 输出）定义 template 函数，并在代码方面将其分开，以便在生成代码时，HTML 模板与 React 代码分开尽可能。

它看起来如何的愚蠢示例：

// htmlBlockTemplate.js
export const helloPageTemplate = (props) => 
`<div> <h1>${props.title}</h1> </div>` // This can be generated from the `no-code`

// page.jsx
export const Page = (props) => { 
   return helloPageTemplate(props)
}

使用函数它可能看起来像：

   const Page = (props) =>
    return React.createElement('div', null, 
          React.createElement('h1', title: prop.title, `The title ${title}`)
   );
}

限制：即使您可以添加自定义组件（如另一个 React 组件或 Web 组件），它也会变得更加困难，因为您还必须处理导入图和概率。

不可避免地，您将需要调整组件的渲染方式（而不是通过从您的 UI 语言创建解析器，或更改 react 组件的编写方式。如果您对AST 有很好的控制，那么为任何一个编写解析器的情况下应该不是问题。

【讨论】：