Craft.js 中实现动态导航菜单的技术方案

背景介绍

在基于 Craft.js 构建的可视化编辑系统中，开发者经常需要创建包含动态内容的组件。本文将以导航栏(Navbar)组件为例，详细讲解如何在 Craft.js 中实现一个包含可编辑菜单项的导航栏组件。

核心挑战

在 Craft.js 中创建动态可编辑组件面临几个主要技术难点：

1. 如何在父组件中嵌套可编辑的子组件
2. 如何维护动态列表项的状态
3. 如何实现子组件的实时编辑功能

解决方案

基础组件结构

首先，我们需要创建两个基础组件：文本组件(MyText)和容器组件(MyContainer)。

文本组件(MyText) 是一个可编辑的文本元素，使用 ContentEditable 实现：

import { useNode, useEditor } from '@craftjs/core';
import ContentEditable from 'react-contenteditable';

export const MyText = ({ text, setText }) => {
  const {
    connectors: { connect },
  } = useNode();
  const { enabled } = useEditor((state) => ({
    enabled: state.options.enabled,
  }));

  return (
    <ContentEditable
      innerRef={connect}
      html={text}
      disabled={!enabled}
      onChange={(e) => setText(e.target.value)}
      tagName="h2"
      style={{
        width: '100%',
        color: '#000000',
        fontSize: '16px',
      }}
    />
  );
};

容器组件(MyContainer) 负责管理动态菜单项的状态：

import React, { useState } from 'react';
import { useNode } from '@craftjs/core';
import { MyText } from './MyText';

export const MyContainer = ({ buttonList: initialButtonList }) => {
  const {
    connectors: { connect },
  } = useNode();

  const [buttonList, setButtonList] = useState(initialButtonList);

  const handleTextChange = (text, index) => {
    const newList = buttonList.map((button, idx) => {
      if (idx === index) {
        return { ...button, text: text };
      }
      return button;
    });
    setButtonList(newList);
  };

  return (
    <div ref={connect} style={{ display: 'flex', gap: '10px' }}>
      {buttonList.map((button, index) => (
        <div key={index}>
          <MyText text={button.text} setText={(text) => handleTextChange(text, index)} />
        </div>
      ))}
    </div>
  );
};

状态管理机制

容器组件通过 React 的 useState 钩子维护菜单项的状态。当用户编辑某个菜单项时，会触发 handleTextChange 函数，该函数会：

1. 根据索引找到对应的菜单项
2. 创建新的状态对象
3. 更新整个菜单列表的状态

这种设计确保了状态变更能够正确触发组件的重新渲染。

编辑功能集成

Craft.js 的 useEditor 和 useNode 钩子为组件提供了编辑能力：

• useEditor 检测当前是否处于编辑模式
• useNode 提供连接器(connectors)将组件与 Craft.js 编辑器连接
• ContentEditable 组件在编辑模式下变为可编辑状态

实际应用示例

将上述组件应用到导航栏场景中，我们可以这样使用：

<MyContainer buttonList={[
  { text: '首页', backgroundColor: '#007BFF' },
  { text: '博客', backgroundColor: '#666666' },
  { text: '联系我们', backgroundColor: '#28a745' }
]} />

最佳实践建议

1. 性能优化：对于大型菜单列表，考虑使用 useMemo 或 useCallback 优化性能
2. 类型安全：在 TypeScript 项目中，为组件属性定义明确的类型
3. 样式隔离：为每个菜单项添加独立的样式控制
4. 扩展性：设计组件时考虑未来可能添加的新功能，如图标支持、下拉菜单等

总结

通过组合使用 Craft.js 的编辑能力与 React 的状态管理，我们可以构建出功能强大且易于维护的动态组件。这种模式不仅适用于导航菜单，也可以推广到其他需要动态内容的组件场景中。关键在于合理划分组件职责，明确状态管理边界，并充分利用 Craft.js 提供的编辑功能。

对于更复杂的场景，开发者还可以考虑将状态管理升级到更专业的解决方案，如使用 Craft.js 的节点状态或集成外部状态管理库。