从 React 元素获取 HTML 标签名称? [英] Get HTML tag name from React element?

问题描述

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

Is it possible to get an HTML tag name from a React element (return from a component)? For example:

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

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

The HTML tag name would be span. I know you can look into the type property of the React element, but it gets really difficult between SFC and normal components, and even harder when the component depth is rather large. For example:

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

仍应返回 span.

推荐答案

没有

React 元素是一个虚拟结构，它们不直接代表 DOM 元素.有两种类型的 React 元素 - 常规" HTML DOM 元素和 React 类的实例化.第一个有一个类型"，因为它非常简单、无状态且不可变，并且创建只是为了呈现其对应的 DOM 元素(但不要将它与 DOM 元素本身混淆！)一个例子是 <div>Foo</div> 在 JSX 中或 React.createElement("div", null, "Foo") 在 JS 中.

React Elements are a virtual construct, and they don't directly represent DOM elements. There are two types of React Elements - "regular" HTML DOM elements, and instantiations of a React Class. The first one has a "type" because it is extremely simple, stateless, and immutable, and is created only to render its corresponding DOM element (but don't confuse it with the DOM element itself!) An example of this would be <div>Foo</div> in JSX or React.createElement("div", null, "Foo") in JS.

然而，React 类的实例没有类型"，因为它们不代表典型的 DOM 元素.当我们实例化一个 React 类时，我们称它为组件"，以将其标识为类的单个实例，具有 render 方法、封装状态等.无法检索类型"组件，因为它将呈现的实际 DOM 元素完全取决于其内部状态以及 render 方法决定返回的内容.一个例子是在某处定义的 React 类，然后用 或 React.createElement(Foo) 实例化.

However instantiations of a React Class don't have a "type" because they don't represent a typical DOM element. When we instantiate a React Class we call it a "Component" to identify it as a single instance of the Class, having a render method, encapsulated state, etc. It's impossible to retrieve the "type" of a Component because the actual DOM elements that it will render are completely dependent on its internal state and what the render method decides to return. An example of this would be a React Class defined somewhere and then instantiated with <Foo /> or React.createElement(Foo).

了解组件实际渲染哪些 DOM 元素的唯一方法是，挂载并渲染它，然后看看它做了什么.组件本身没有固有的类型".可以想象，您可以挂载一个组件，使用 ref 在渲染时捕获 DOM 元素，然后使用回调函数将此信息传递回父级.

The only way to know what DOM elements a Component is actually rendering is to, well, mount and render it and see what it does. There is no "type" inherent to the component itself. You could conceivably mount a Component, use ref to capture the DOM element as it's rendered, and then use a callback function to pass this information back to parent(s).

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 标签名称?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！