javascript – 带有变量HTML标记的JSX

前端之家收集整理的这篇文章主要介绍了javascript – 带有变量HTML标记的JSX前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个在JSX中定义的React组件,它使用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.

解决方法

尝试设置组件状态并像这样渲染:
render: function() {

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

        },

猜你在找的JavaScript相关文章