如何在Mirador 3构建阶段为视图内HTML元素添加属性？

1. 重写内置组件（直接高效） #

Mirador 3基于React构建，所有核心组件都支持通过配置替换。要给内置组件（比如Viewer、WindowToolbar等）添加data-title/data-intro属性，最直接的方式是重写组件渲染逻辑：

// 导入目标内置组件
import { Viewer } from 'mirador/dist/es/src/components/Viewer';

// 自定义组件继承原逻辑并追加属性
const CustomViewer = (props) => {
  // 覆盖原组件的render方法
  const originalRender = Viewer.prototype.render;
  Viewer.prototype.render = function() {
    const baseElement = originalRender.call(this);
    // 给组件根元素添加data属性
    baseElement.props = {
      ...baseElement.props,
      'data-title': '主资源视图',
      'data-intro': '此区域展示数字藏品，支持缩放、平移、旋转操作',
    };
    return baseElement;
  };

  return <Viewer {...props} />;
};

// 在Mirador配置中替换原组件
const miradorConfig = {
  // 你的其他配置项...
  components: {
    Viewer: CustomViewer,
  },
};

// 初始化Mirador
Mirador.viewer(miradorConfig);

2. 封装高阶组件（复用性更强） #

如果需要给多个组件添加同类属性，可封装通用高阶组件避免重复代码：

import React from 'react';

// 通用HOC：给目标组件批量添加data属性
const withIntroAttrs = (WrappedComponent, attrs) => {
  return (props) => {
    const componentElement = <WrappedComponent {...props} />;
    // 克隆组件并合并属性
    return React.cloneElement(componentElement, {
      ...componentElement.props,
      ...attrs,
    });
  };
};

// 给WindowToolbar组件应用HOC
import { WindowToolbar } from 'mirador/dist/es/src/components/WindowToolbar';
const ToolbarWithIntro = withIntroAttrs(WindowToolbar, {
  'data-title': '窗口工具栏',
  'data-intro': '提供视图切换、全屏、关闭窗口等操作按钮',
});

// 配置中替换原组件
const miradorConfig = {
  components: {
    WindowToolbar: ToolbarWithIntro,
  },
};

3. 自定义扩展组件（直接写入代码） #

如果你是给自己开发的两个Mirador扩展组件加属性，直接在扩展的组件代码里手动添加即可：

// 你的扩展组件示例
const CustomZoomControl = () => {
  return (
    <div 
      className="mirador-zoom-control"
      data-title="缩放控制器"
      data-intro="拖动滑块或点击按钮调整资源显示比例"
    >
      {/* 组件内容 */}
    </div>
  );
};

注意事项 #

• 确保组件导入路径正确，Mirador的ES模块路径通常为mirador/dist/es/src/components/[组件名]
• 若目标组件是函数式组件，需调整重写逻辑为直接修改返回的JSX元素，而非原型方法

内容的提问来源于stack exchange，提问作者Ulrik Lyngs