JSX带有变量的HTML标记

Question

我有使用要么它返回一个细胞在JSX限定的阵营部件td或th,例如:

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>
);

是否有可能以这样的方式编写JSX,即从变量中获取HTML标记？喜欢:

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

上面的代码返回指向的错误"意外令牌" {.我正在使用带有babel插件的webpack来编译JSX.

Answer 1

尝试设置组件状态并像这样渲染:

render: function() {

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

        },

Answer 2

你可以这样做:

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

请注意,这并不能真正解决您关于"动态标记"的问题,而是您似乎遇到的问题.