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

Question

是否可以从React元素中获取HTML标记名称(从组件返回)？例如:

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

HTML标记名称将是span.我知道你可以查看typeReact元素的属性,但在SFC和普通组件之间变得非常困难,当组件深度相当大时更难.例如:

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

还是应该回来span.

Answer 1

没有.

React Elements是一个虚拟构造,它们不直接表示DOM元素.有两种类型的React元素 - "常规"HTML DOM元素和React类的实例化.第一个有"型",因为它是非常简单的,无状态的,和不可改变的,并且只被创建以呈现其对应的DOM元素(但不与DOM元素本身混淆!)这方面的一个例子是,<div>Foo</div>在JSX或React.createElement("div", null, "Foo")JS.

但是,React类的实例化没有"类型",因为它们不代表典型的DOM元素.当我们实例化React类时,我们将其称为"Component",将其标识为Class的单​​个实例,具有render方法,封装状态等.无法检索Component的"类型",因为实际的DOM元素是它将呈现完全依赖于其内部状态以及该render方法决定返回的内容.这方面的一个例子是在某处定义的React类,然后用<Foo />或实例化React.createElement(Foo).

了解Component实际渲染的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