React中DOMException：CustomElement构造失败（结果不可含属性）求助

异常原因 #

这个错误是因为自定义元素（Web Component）在构造阶段不允许接收属性，但React在初始化组件时会直接把JSX中的属性传递给自定义元素的构造函数，触发了这个限制。另外代码里还有几处写法问题也可能加重异常。

修复步骤及代码修改 #

1. 修正observer的使用方式 #

observer应该包裹整个组件，而不是单个回调函数，单个函数不需要这个装饰器。

2. 避免条件渲染返回空字符串 #

空字符串会被React渲染成文本节点，可能干扰Web Component的初始化，改成返回null。

3. （可选）通过ref延迟设置属性 #

如果自定义元素严格禁止构造阶段传属性，可以用ref结合useEffect在组件挂载后再设置属性和事件监听。

修改后的PipelineConfiguration组件 #

import React from 'react';
import { OwcModalDialog, OwcButton } from '@one/react';
import './index.css';
import { observer } from 'mobx-react-lite';
import { store } from "../../containers/App/prelex.store";

// 用observer包裹整个组件，确保响应store变化
const PipelineConfiguration = observer(() => {
    // 移除不必要的observer包裹
    const handleVisibleChange = (visible) => {
        // 这里添加状态更新逻辑，比如同步store的visible状态
    };

    const { pipelineSelection, showConfiguration, showConfigurationModal } = store;

    return (
        <OwcModalDialog 
            visible={showConfiguration} 
            size="md"  
            onVisibleChange={(ev) => handleVisibleChange(ev.detail)}
        >
            <div slot="header">Configure "{pipelineSelection}" pipeline</div>
            <div slot="actions">
                <OwcButton variant="primary" onClick={() => showConfigurationModal(false)}>
                    Configure
                </OwcButton>
            </div>
        </OwcModalDialog>
    );
});

export default PipelineConfiguration;

修改后的主组件条件渲染 #

...
import PipelineConfiguration from "../../components/ModalConfiguration";
...

const App = observer(() => {
    const { showConfiguration } = store;

    return (
        <>
            <div id="modalConfiguration">
                {/* 用null替代空字符串，避免生成无用文本节点 */}
                { showConfiguration ? <PipelineConfiguration /> : null }
            </div>
            ...
        </>
    );
});

若上述方法无效，尝试用ref手动绑定属性 #

import React, { useEffect, useRef } from 'react';
import { OwcModalDialog, OwcButton } from '@one/react';
import './index.css';
import { observer } from 'mobx-react-lite';
import { store } from "../../containers/App/prelex.store";

const PipelineConfiguration = observer(() => {
    const modalRef = useRef(null);
    const { pipelineSelection, showConfiguration, showConfigurationModal } = store;

    useEffect(() => {
        const modal = modalRef.current;
        if (!modal) return;

        // 挂载后再设置属性，避开构造阶段限制
        modal.visible = showConfiguration;
        modal.size = "md";

        // 手动绑定事件监听
        const handleVisibleChange = (ev) => {
            // 处理visible变化逻辑
        };
        modal.addEventListener('visibleChange', handleVisibleChange);

        // 组件卸载时移除监听
        return () => modal.removeEventListener('visibleChange', handleVisibleChange);
    }, [showConfiguration]);

    return (
        <OwcModalDialog ref={modalRef}>
            <div slot="header">Configure "{pipelineSelection}" pipeline</div>
            <div slot="actions">
                <OwcButton variant="primary" onClick={() => showConfigurationModal(false)}>
                    Configure
                </OwcButton>
            </div>
        </OwcModalDialog>
    );
});

export default PipelineConfiguration;

关键说明 #

• Web Component的构造函数通常不允许操作属性或DOM，React的默认属性传递方式会触发这个限制，延迟设置属性可以解决。
• observer的正确用法是包裹整个组件，确保组件能响应Mobx store的状态变化，单个函数不需要这个装饰器。
• 条件渲染返回null是React中“不渲染任何内容”的标准写法，避免生成不必要的节点干扰组件初始化。

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