如何通过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是最有意义的。