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

Question

我想知道，如果之前手动硬编码，是否可以创建一个可视化的无代码构建器来处理 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..."}哪个更容易重写？ (但需要一个新的渲染器)

Answer 1

视情况而定

我相信您正在寻找的答案在很大程度上取决于您希望您的无代码构建器拥有的灵 active 水平。

据此，您的项目可以从不同解决方案的权衡和优势中获益。

让我们简单地记住，基本上React 组件将需要一些 Prop ，然后将通过渲染 模板获取这些 Prop 并输出有效的 HTML。这是假设您不需要 react 组件更智能的基本情况。此外，JSX 只是函数调用的糖衣，所以你基本上可以独立于使用 JSX 语法编写函数来输出 React 组件。因此无需声明 HTML，只需将 无代码工具 的输出更改为 JS 而不是 HTML。

例如，如果您可以修改无代码工具 的呈现方式，则可以指定在将一个元素移入另一个元素时，您基本上:

高度灵活和可定制

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

简单的无代码生成器

对于更简单的场景，您可以使用您提到的第一种方法，您甚至不需要添加 ID，一些工具如 React Developer Tools已经可以检查 VirtualDOM 以了解渲染的哪一部分属于哪个 React 元素(使用 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，然后编写一个任何一种情况的解析器都应该不是问题。