React要素からHTMLタグ名を取得しますか？

Question

React要素（コンポーネントからの戻り値）からHTMLタグ名を取得することは可能ですか？例：

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

HTMLタグ名はspanです。あなたはReact要素のtypeプロパティを調べることができますが、コンポーネントの深度がかなり大きい場合はSFCと通常のコンポーネントの間で実際に難しくなります。たとえば、

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

spanを返す必要があります。

Answer 1

号

はElementsは仮想構成されている反応し、彼らが直接DOM要素を表すものではありません。 React Elementsには、通常のHTML DOM要素とReact Classのインスタンス化の2種類があります。最初のものは非常にシンプルでステートレスで不変なので、対応するDOM要素をレンダリングするためにのみ作成されますが（DOM要素自体と混同しないでください）、「タイプ」を持っています。これの例は<div>Foo</div> JSXではReact.createElement("div", null, "Foo")、JSではReact.createElement("div", null, "Foo")です。

しかし、リアクションクラスのインスタンス化には、一般的なDOM要素を表すものではないため、「タイプ」はありません。 Reactクラスをインスタンス化するときには、それを「Component」と呼び、renderメソッド、カプセル化状態などを持つクラスの単一インスタンスとして識別します。コンポーネントの「型」を取得することは不可能です。実際のDOM要素それがレンダリングすることは、その内部状態と何かが返すことを決定するものに完全に依存しています。この例は、どこかで定義されたリアクトクラスで、次に<Foo />またはReact.createElement(Foo)でインスタンス化されます。

実際にコンポーネントがどのようなDOM要素をレンダリングするかを知る唯一の方法は、マウントしてレンダリングし、その動作を確認することです。コンポーネント自体に固有の「タイプ」はありません。おそらくコンポーネントをマウントし、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

Answer 2

あなたはDOMノードをつかむように反応するのTop-Level APIを使用することができます。 2つの注意点：1）これは、ステートレス機能コンポーネントでは参照できないため、2）コンポーネントがネイティブDOM要素を出力する場合にのみ機能するため、2番目のケースでは機能しませんコンポーネントは別の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} /> 
    } 
}