如何通過ReactJS中的組件名稱獲取元素

Question

我試圖獲取DOM中組件的列表。類似於 document.getElementsByTagName("ComponentName")但帶有組件名稱。

Answer 1

React組件不是DOM模型的一部分。因此，您無法從document對象獲取組件列表。

你可以做的是給你感興趣的React組件找一個特定的css類名，然後你可以在DOM中找到它。

---

例如：

class MyComponent extends React.Component { 
 
    render(){ 
 
    return (
 
     <div className="myComponent">{this.props.children}</div> 
 
    ); 
 
    } 
 
} 
 

 
class MyApp extends React.Component { 
 
    render(){ 
 
    return (
 
     <div> 
 
     <MyComponent>foo</MyComponent> 
 
     <MyComponent>bar</MyComponent> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<MyApp />, document.getElementById("myApp")); 
 

 
/* get components from their class name: */ 
 
var list = document.getElementsByClassName("myComponent"); 
 
for (var item of list) { 
 
    console.log(item) 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="myApp"></div>

你當然也可以使用id和使用document.getElementById()（如果id是唯一的）或name和使用document.getElementsByName()等方法。我認爲class是最有意義的。