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

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

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

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

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

仍然应该返回跨度.

没有.

React Elements是一个虚拟构造,它们不直接表示DOM元素.有两种类型的React元素 – “常规”HTML DOM元素和React类的实例化.第一个有一个“类型”,因为它非常简单,无状态和不可变,并且只是为了渲染其相应的DOM元素而创建(但不要将它与DOM元素本身混淆！)这样的一个例子是< ; DIV>富< / DIV>在JSX或JS中的React.createElement(“div”,null,“Foo”). 但是,React类的实例化没有“类型”,因为它们不代表典型的DOM元素.当我们实例化React类时,我们将其称为“Component”,将其标识为Class的单个实例,具有render方法,封装状态等.由于实际的DOM元素,无法检索Component的“类型”它将呈现完全依赖于其内部状态以及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

原文链接：https://www.f2er.com/react/301234.html

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

猜你在找的React相关文章