为什么我不能在React中通过ref获取元素

Question

I'm trying to get the element height via ref using React JS, but without success.

I have something like this :

render() {
    let cars = carData.filterCars(this.props.carsToShow, this.props.filters);
    return (
        <div>
            <div className="carList">
                <div className="cars" ref="cars">
                    {cars.map((car, i) => {
                        let carRef = "car-" + car.id;
                        return (
                           <div ref={carRef} key={i}>
                               <div>
                                   <div><img src={car.image_url} /></div>
                                   <div className="carNameAndDesc">
                                        <div>{car.make} {car.model}</div>
                                        <div>{car.price}</div>
                                   </div>
                               </div>
                             </div>
                         );
                      })}
                 </div>
            </div>

            <div ref="bigScreenDetails" className="bigScreenDetails">
               <div className="carDetailsBigScreen">
                    <CarDetails carID={this.state.carID}/>
               </div>
            </div>
        </div>
    );
}

And in componentDidMount I try to do it as follows :

componentDidMount(){
    let carRef = "car-" + this.props.carID;  //22
    let refs = this.refs[carRef].offsetHeight; //undefined
    let refs1 = this.refs["cars"].offsetHeight; //900
    let refs2 = this.refs["bigScreenDetails"].offsetHeight; //1400
}

I can't get ref of the div inside map. Only for that ref I get undefined, for other refs I get the right values.

Any ideas?

console.log(carRef) inside render returns

"car-20"
"car-21"
"car-22"
.......
"car-35"

And console.log(carRef) inside componentDidMount returns

"car-22"

But if I console.log(this.refs) in componentDidMount I get :

Thus only two refs insted of three.

UPDATE

As if there is absolutely no ref inside

{cars.map((car, i) => {
                    let carRef = "car-" + car.id;
                    return (
                       <div ref={carRef} key={i}>

                         </div>
                     );
                  })}

Here is the console log :

let carRef = "car-" + carID;
    let refs = this.refs;
    let one = ReactDOM.findDOMNode(this.refs[carRef]);
    let two = this.carRefs;

    console.log("All refs : " + refs);
    console.log("Vikramaditya : " + one);
    console.log("Tom : " + two);

In first console.log I should see all three refs, but I see only two of them.

Answer 1

Ideally, avoid using refs in the first place...

If you need to use them for some reason, I'd recommend using the callback style. This will allow you to use references to the elements themselves, rather than messing around with strings.

Looking at the docs , I'm not even sure whether string refs are supported any more...

If I were you (and I was definitely sure I needed all these refs) I'd do something like this:

cars.map(car => (
    <div ref={ref => this.carRefs[car.id] = ref} key={car.id}>
    </div>
))

In your constructor, you can assign this.carRefs = {}; .

Now you can access your cars in the this.carRefs object from inside componentDidMount .

 class TestComponent extends React.Component { constructor() { super(); this.carRefs = {}; } componentDidMount() { console.log(this.carRefs); } render() { return (<div> {this.props.cars.map(({id}) => <div key={id} ref={ref => this.carRefs[id] = ref}></div>)} </div>); } } const cars = [{id: 1}, {id: 2}]; ReactDOM.render(<TestComponent cars={cars} /> , document.getElementById("root")); 

 <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="root"></div>