Question

我尝试使用React JS通过ref获取元素高度，但没有成功。

我有这样的事情：

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的参考。只有那个参考我得到了未定义，对于其他参考我得到正确的值。

有什么想法吗？

render中的console.log（carRef）返回

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

componentDidMount中的console.log（carRef）返回

"car-22"

但如果我在componentDidMount中console.log(this.refs)得到：

因此只有两个参考书中有三个。

更新

好像里面绝对没有参考

{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对象中访问您的汽车。

＆＃13;

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

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

＆＃13;

为什么我无法通过参考React

1 个答案: