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

Question

在我的 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>

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

Answer 1

看起来React对待自定义元素的方式有所不同，直接传递所有属性，而不需要对React特殊属性的名称进行任何转换。因此className不会被翻译成class.

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

请参阅问题讨论： https: //github.com/facebook/react/issues/4933
和文档： https: //reactjs.org/docs/web-components.html