使用 react.js 渲染自定义 html 标签

Posted 2023-02-21

【中文标题】使用 react.js 渲染自定义 html 标签

【英文标题】：Rendering custom html tag with react.js

【发布时间】：2017-04-19 00:41:44

【问题描述】：

一开始我想做的事情很简单，但是我从 webpack 收到一个（显然完全没用的）错误，我想知道如何修复它，我想要一个简单的“自定义”标签来呈现React，代码如下：

          let htmlTag = "h" + ele.title.importance;
          let htmlTagEnd = "/h" + ele.title.importance;
          return(
            <htmlTag key=elementNumber>ele.title.content<htmlTagEnd>
          );

基本上，我不想拥有一个预定义的标签，而是我想拥有自己的 template 标签，我知道在这种情况下会有解决方法（例如，用我的“重要性”值定义一个 className 并为此添加一些 css )，但为了科学，我想知道如何（以及是否）可以在 react/jsx 中完成。

【参考方案1】：

JSX 不允许您使用 dynamic HTML 标签（动态组件可以使用）。这是因为每当你使用类似<sometag ... /> 的东西时，都会创建一个标签名为sometag 的HTML 元素。 sometag 未解析为变量。

您也无法执行上面显示的操作。 JSX expressions are not valid in place of a tag name.

相反，您必须直接致电React.createElement：

return React.createElement(
  "h" + ele.title.importance,
  
    key: elementNumber,
  ,
  ele.title.content
);

【参考方案2】：

编辑

我最初的回答不正确，您不能直接使用变量，需要使用Felix's answer 中描述的 createElement 方法。如下所述，并在我最初链接的博客文章中使用，您可以使用对象属性，因此我制作了一个示例，希望它可以作为问题的答案。

class Hello extends React.Component 
    constructor() 
    super();
    this.state = 
        tagName: "h1"
    ;
  

  sizeChange(i) 
    this.setState(
        tagName: 'h' + i
    );
  

  changeButtons() 
    var buttons = [];
    for (let i=1; i<=6; i++) 
        buttons.push(<button onClick=() => this.sizeChange(i)>Hi</button>);
    
    return buttons;
  

  render() 
    return (
    <div>
      this.changeButtons()
        <this.state.tagName>
        Change Me
      </this.state.tagName>
    </div>
    );
  

JSFiddle here

原答案

它可以做到，虽然我不认为它是官方支持的，所以将来可能会在没有警告的情况下中断。这种方法需要注意的是，您为标签选择的变量名称不能与 HTML 元素相同。

var Demo = React.createClass(
    render: function() 
       const elementTag = 'h' + ele.title.importance;
       return(
           <elementTag>
              Header x contents
           </elementTag>
       );
    
);

更多解释和更完整的例子可以找到here

【讨论】：

This doesn't work.

它创建一个标签名为elementtag的DOM元素。您可以创建一个 Stack Snippet 示例并亲自查看。您的示例与博文中的示例之间的区别在于博文使用了对象属性的值（确实有效）。

不幸的是，你显然是对的 :) 我将把我的答案编辑成更有用的东西。