reactjs 包含来自变量的HTML标记的JSX

wydwbb8l 于 2022-12-29 发布在 React

关注(0)|答案(3)|浏览(121)

我在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}>
);

上面的代码返回一个错误：
指向{的“意外标记”。
我使用Webpack和Babel插件来编译JSX。

reactjs

来源：https://stackoverflow.com/questions/39396792/jsx-with-a-html-tag-from-a-variable

3条答案

按热度按时间

wwwo4jvm1#

尝试如下设置组件状态和呈现：

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

赞(0）回复(0）举报 2022-12-29

fruv7luv2#

您可以执行以下操作：

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

请注意，这并没有真正解决您关于"动态标记"的问题，而是解决了您似乎遇到的问题。

赞(0）回复(0）举报 2022-12-29

oaxa6hgo3#

第一个答案对我的情况不起作用，所以我用另一种方法解决了它。从React documentation每个元素转换为纯JS，就像这样。
因此，可以为React组件创建如下动态元素：

let myTag = myType === "header" ? 'th' : 'td';

React.createElement(
  myTag,
  {className: 'some-class'},
  <div className="some-class">some content</div>
)

赞(0）回复(0）举报 2022-12-29

我来回答

reactjs 包含来自变量的HTML标记的JSX

3条答案

相关问题

热门标签

最新问答