className 未更改为 JSX 中自定义元素的类属性答案

【问题标题】：className is not changed to class attribute for custom elements in JSXclassName 未更改为 JSX 中自定义元素的类属性
【发布时间】：2022-10-18 14:49:50
【问题描述】：

在我的一个 React 组件中，我对一些自定义元素有以下定义：

declare global {
    // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace JSX {
        interface IntrinsicElements {
            'd3fc-group': DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
            'd3fc-svg': DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
        }
    }
}

我返回：

return (
    <div ref={d3Container} className='main_layout' data-testid={'chart'}>
        <d3fc-group
            id='group'
            className='hellooo'
            style={{ display: 'flex', height: '100%', width: '100%', flexDirection: 'column' }}
            auto-resize>
        </d3fc-group>
    </div>
);

但在生成的 html 中，“className”被转换为“classname”而不是“class”属性。

<d3fc-group id="group" classname="hellooo" auto-resize="true" style="display: flex; height: 100%; width: 100%; flex-direction: column;"><div style="flex: 1 1 0%; display: flex; flex-direction: column;"></d3fc-group>

如何使它像其他组件一样转换为“类”属性？

【问题讨论】：

标签： reactjs typescript jsx tsx

【解决方案1】：

看起来 React 对自定义元素的处理方式不同，并且直接传递所有属性，而没有任何转换 React 特殊属性的名称。因此className 不会被翻译成class。

您可以直接在您的情况下使用class。

见问题讨论：https://github.com/facebook/react/issues/4933

【讨论】：

【解决方案2】：

请简化并使用class 而不是className。

自定义元素确实可以在 React 中使用。您必须使用 class 而不是 className，因为自定义元素规范要求我们允许用户指定 className 属性，并且我们需要为自定义元素保留该功能。 - 资源

【讨论】：