从React元素获取HTML标签名称？

  • Z时代
  • 2024-01-10
  • 分类：问答

是否可以从React元素（从组件返回）获取HTML标签名称？例如：

function Foo() {
    return <span>Hello</span>;
}

HTML标记名称为span。我知道您可以研究typeReact元素的属性，但是在SFC和普通组件之间确实很难，在组件深度很大时甚至更加困难。例如：

function Bar() {
    return <Foo />;
}

应该仍然返回span。

回答：

没有。

React Elements是一个虚拟构造，它们不直接表示DOM元素。有两种类型的React元素-“常规” HTML

DOM元素和React类的实例。第一个具有“类型”，因为它非常简单，无状态且不可变，并且仅用于呈现其对应的DOM元素（但不要将其与DOM元素本身混淆！）<div>Foo</div>。

JSX或React.createElement("div", null, "Foo")JS中。

但是，React类的实例没有“类型”，因为它们不代表典型的DOM元素。当我们实例化一个React

Class时，我们将其称为“组件”以将其标识为Class的单​​个实例，具有render方法，封装状态等。不可能检索Component的“类型”，因为实际的DOM元素它将完全取决于其内部状态以及该render方法决定返回的内容。一个示例是在某处定义的React类，然后使用<Foo

/>或实例化React.createElement(Foo)。

知道某个组件实际呈现的DOM元素的唯一方法就是安装并呈现它，然后查看其功能。组件本身没有固有的“类型”。可以想象，您可以挂载一个Component，用于ref捕获呈现的DOM元素，然后使用回调函数将此信息传递回父对象。

var Child = React.createClass({
  render: function() {
    return <div ref={function(el){this.props.whatElementAmI(el)}.bind(this)} >Oh My!</div>
  }
});
var Parent = React.createClass({
  whatElementAmI: function(el) {
    console.log(el.nodeName); // "DIV"
  },
  render: function() {
    return <div><Child whatElementAmI={this.whatElementAmI.bind(this)} /></div>
  }
});

https://facebook.github.io/react/docs/glossary.html#react-

elements

以上是 从React元素获取HTML标签名称？ 的全部内容， 来源链接： utcz.com/qa/425698.html

回到顶部