Question

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

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

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

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

仍然应该返回span。

Answer 1

没有

React Elements是一个虚拟构造，它们不直接表示DOM元素。有两种类型的React元素 - “常规”HTML DOM元素和React类的实例化。第一个有一个“类型”，因为它非常简单，无状态和不可变，并且只是为了渲染其相应的DOM元素而创建（但不要将它与DOM元素本身混淆！）这样的例子是{ JSX中的{1}}或JS中的<div>Foo</div>。

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

了解Component实际渲染的DOM元素的唯一方法是，安装和渲染它并查看它的作用。组件本身没有固有的“类型”。您可以设想安装一个Component，使用React.createElement(Foo)捕获呈现的DOM元素，然后使用回调函数将此信息传递回父级。

ref

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

Answer 2

您可以使用React的Top-Level API来获取DOM节点。两个警告：1）这不会对无状态功能组件起作用，因为你不能在它们上面添加引用，2）它只有在组件输出本机DOM元素时才有效，所以它不会成功在第二种情况下工作，组件输出另一个React组件。

import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  render() {
    return <span>Hello</span>;
  }
}

class Container extends React.Component {
  componentDidMount() {
    var domNode = ReactDOM.findDOMNode(this._component);
    console.log(domNode.tagName); // "DIV"
  }
  render() {
    return <MyComponent ref={(c) => this._component = c} />
  }
}

Answer 3

是的

import { renderToString } from 'react-dom/server';

const Span = () => <span>hello</span>
renderToString(<Span />)
// "<span>hello</span>"

然后使用正则表达式获取标签。

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

3 个答案: