Question

我需要找到子元素div的长度

<div className="intentContainer">
      <div className="intent">
      </div>
      <div className="intent">
      </div>
</div>

这是我的代码。需要找不到＆＃39;意图＆＃39;元素

Answer 1

即使文档鼓励使用ReactDOM.findDOMNode，您也可以使用ref。

DEMO

您需要将ref放在父节点上。

<div ref="intentContainer" className="intentContainer"></div>

在我们的componentDidMount方法中使用以下代码。

 componentDidMount(){

    // get this intentContainer using ref (Its your parent)
    var intentContainer = this.refs.intentContainer;

    // this will return the count of all childrens 
    var childrenCount = this.refs.intentContainer.children.length;

    // get the count by particular class name from parent dom
    var countByClass = ReactDOM.findDOMNode(intentContainer).getElementsByClassName('intent').length;

  }

你的渲染方法如下，

   render() {
      return (
        <div ref="intentContainer" className="intentContainer">
           <div className="intent">
           </div>
           <div className="intent">
           </div>
        </div>
      );
    }

如需更多帮助，请查看here和here。

这会帮助你!!

Answer 2

您可以使用callback ref。

ref={(ele) => this.myEle = ele

将callback ref放在父节点上，您需要长度或子计数。

return (<div style={styles} ref={(ele) => this.myEle = ele}>
        <div >Hello World</div>
        <h2>Start editing to see some magic happen {'\u2728'}</h2>
     </div>);

使用componentDidMount或componentDidUpdate生命周期来获取长度。

componentDidMount(){
  console.log(this.myEle.children.length); //2
}

工作React#codesandbox demo

Answer 3

import React, { Component } from "react";

export default class SampleComponent extends Component {
    intentCount(){
        console.log(document.querySelectorAll('.intent').length)
    }
    render() {
        return (
            <div className="intentContainer">
                <div className="intent">
                </div>
                <div className="intent">
                </div>
                <div className="intent">
                </div>
                <button onClick={this.intentCount}>Intent Count</button>
            </div>
        );
    }
}

这应该可行:) ..

反应|如何通过id / class获取div的长度？

3 个答案:

DEMO