如何在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最有意义。