带有来自变量的 HTML 标记的 JSX

Question

我在 JSX 中定义了一个 React 组件，其中 returns 一个使用 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>
);

是否有可能以 HTML 标签取自变量的方式编写 JSX？喜欢：

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

上面的代码 returns 一个错误 "unexpected token" 指向 {。我正在使用带有 babel 插件的 webpack 来编译 JSX。

Answer 1

您可以这样做：

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

请注意，这并没有真正解决您关于 "dynamic tag" 的问题，而是您似乎遇到的问题。

Answer 2

尝试像这样设置组件状态和渲染：

render: function() {

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

        },

Answer 3

第一个答案对我的情况不起作用，所以我用另一种方式解决了它。来自 React documentation each element converts to pure JS like this.

因此可以像这样为 React 组件创建动态元素：

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

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

带有来自变量的 HTML 标记的 JSX

JSX with a HTML tag from a variable

javascript

reactjs

react-jsx