Почему я не могу получить элемент по ref в React

Question

Я пытаюсь получить высоту элемента через ref, используя React JS, но безуспешно.

У меня есть что-то вроде этого:

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

И в componentDidMount я пытаюсь сделать это следующим образом:

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 
} 

Я не могу получить реф в DIV внутри карты. Только для этого ref я получаю undefined, для других ссылок я получаю правильные значения.

Любые идеи?

console.log (carRef) внутри визуализации возвращается

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

И console.log (carRef) внутри componentDidMount возвращает

"car-22" 

Но если я console.log(this.refs) в componentDidMount я получаю:

Таким образом, onl y два refs insted из трех.

UPDATE

Как будто не существует абсолютно никаких ссылок внутри

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

         </div> 
        ); 
        })} 

Вот лог консоли:

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

В первом console.log я должен видеть все три рефов , но я вижу только два из них.

Answer 1

В идеале, избегать использования рефов в первую очередь ...

Если вы потребность использовать их по какой-то причине, я бы рекомендовал использовать стиль обратного вызова. Это позволит вам использовать ссылки на сами элементы, а не вмешиваться со строками.

Глядя на the docs, я даже не уверен, поддерживаются ли строка рефов больше ...

Если я вас были (и я определенно был уверен, что мне нужно все эти рефов) Я хотел бы сделать что-то вроде это:

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

В конструкторе, вы можете назначить this.carRefs = {};.

Теперь вы можете получить доступ к своим автомобилям в объекте this.carRefs изнутри 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>