動的に設定されたカスタムタグに反応する

Question

カスタムヘッダータイプごとにコンポーネントを作成する必要はなく、動的に行いたいと考えています。

const HEADERS = { 
    'header-one': 'h1', 
    'header-two': 'h2', 
    'header-three': 'h3', 
    'header-four': 'h4', 
    'header-five': 'h5', 
}; 

_

let tag = HEADERS[type] || 'span'; 
return (
    <{tag} id={id}> 
     {props.children} 
    </{tag}> 
); 

Answer 1

[OK]を、これを読んだ後：私はそれを資本にする必要があるということを把握することができたDynamic tag name in jsx and React

（NFIなぜ？）

const Tag = HEADERS[type] || 'span'; 
return (
    <Tag id={id}> 
     {props.children} 
    </Tag> 
); 

現在作業中です。なぜそれが首都になる必要があるかという理由で、より良い答えや説明にはまだ開いています。