React.js dangerouslySetInnerHTML内のDOM操作について

React.jsのdangerouslySetInnerHTMLの中からDOM要素を(className,ref)等を使って複数の要素を取得したいのですが、可能でしょうか。
また、componentDidMount内で取得した要素を扱えたら嬉しいです。

よろしくお願いいたします。

下記#content内にあるDOM要素(.testNode)を取得したいです。

React.js
1var Content = React.createClass({
2    componentDidMount: function() {
3        var node = ReactDOM.findDOMNode(this.refs.testNode);
4        var subtitles = document.getElementsByClassName("testNode");
5    }
6});
7
8<div id="content" dangerouslySetInnerHTML={{__html: this.props.content}} />

HTML
1<p ref="testNode" class="testNode">テストノード</p>
2<p ref="testNode" class="testNode">テストノード</p>
3<p ref="testNode" class="testNode">テストノード</p>

行動規範の内容に同意します

回答1件

ベストアンサー

dangerouslySetInnerHTMLはinnerHTMLを使ってHTMLをそのまま入れているだけになりますので、ref属性は考慮されません。React上で管理されているdiv要素を取得して、そこからgetElementByClassName等で辿るしかないと思います。

適当に作ってみたサンプル: https://jsbin.com/ketitevuko/edit?html,js,output

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width">
6  <title>JS Bin</title>
7</head>
8<body>
9<script src="https://fb.me/react-15.1.0.js"></script>
10<script src="https://fb.me/react-dom-15.1.0.js"></script>
11<div id="target">
12</div>
13</body>
14</html>

JavaScript
1class Content extends React.Component {
2  componentDidMount() {
3    for (li of this._content
4        .getElementsByClassName('list')[0]
5        .getElementsByTagName('li')) {
6      li.style.color = li.textContent;
7    }
8  }
9  render() {
10    return (
11      <div
12        id="content"
13        dangerouslySetInnerHTML={{__html: this.props.content}}
14        ref={(c) => this._content = c}
15      >
16      </div>
17    );
18  }
19}
20
21html_document = `
22<ol class="list">
23  <li ref="hoge">red</li>
24  <li>green</li>
25  <li>blue</li>
26</ol>
27`
28
29ReactDOM.render(
30  <Content content={html_document}/>, 
31  document.getElementById("target")
32);