JSX z tagiem HTML zmiennej

Question

Mam komponent React zdefiniowane w JSX która zwraca komórkę przy użyciu td lub th, np:

if(myType === 'header') { 
    return (
    <th {...myProps}> 
     <div className="some-class">some content</div> 
    </th> 
); 
} 

return (
    <td {...myProps}> 
    <div className="some-class">some content</div> 
    </td> 
); 

możliwe byłoby napisać JSX w taki sposób, czy tag HTML pochodzi ze zmiennej? Jak:

let myTag = myType === "header" ? 'th' : 'td'; 
return (
    <{myTag} {...myProps}> 
    <div className="some-class">some content</div> 
    </{myTag}> 
); 

Powyższy kod zwróci błąd „nieoczekiwany znak” wskazując na {. Używam webpacka z wtyczką babel do kompilacji JSX.

Answer 1

Spróbuj ustawić swój stan podzespołów i rendering tak:

render: function() { 

      return(
       <this.state.tagName {...myProps}> 
        <div className="some-class">some content</div> 
       </this.state.tagName> 
      ); 

     }, 

Answer 2

można zrobić coś takiego:

const content = <div> some content </div> 
return (
    {myType === 'header' 
    ? <th>{content}</th> 
    : <td>{content}</td> 
    } 
) 

Zauważ, że to naprawdę nie rozwiąże pytanie o „dynamicznym tagiem”, ale raczej problemu to wydaje się mieć.