Question

我试图获取DOM中组件的列表。就像是 document.getElementsByTagName("ComponentName")，但有一个组件名称。

Answer 1

React Components不是DOM模型的一部分。因此，您无法从document对象获取组件列表。

你可以做的是给你想要查找某个css类名的React组件，然后你可以在DOM中找到它。

例如：

＆＃13;

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)
}

＆＃13;

<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>

＆＃13;

您当然也可以使用id并使用document.getElementById()（如果id是唯一的）或name并使用document.getElementsByName()和其他方法。我认为class最有意义。

如何在ReactJS中按组件名称获取元素

1 个答案: