[英]Why I can't get element by ref in React
我正在嘗試使用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的參考。 只有那個參考我得到未定義,對於其他參考我得到正確的值。
有任何想法嗎?
console.log(carRef)內部渲染返回
"car-20"
"car-21"
"car-22"
.......
"car-35"
並且componentDlogMount中的console.log(carRef)返回
"car-22"
但是如果我在componentDidMount中的console.log(this.refs)
我得到:
因此,只有兩個參考注冊三個。
UPDATE
好像里面絕對沒有ref
{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中,我應該看到所有三個引用,但我只看到其中兩個。
理想情況下,首先避免使用refs ...
如果由於某種原因需要使用它們,我建議使用回調樣式。 這將允許您使用對元素本身的引用,而不是使用字符串。
看看文檔 ,我甚至不確定是否支持字符串引用...
如果我是你(我肯定我需要所有這些參考)我會做這樣的事情:
cars.map(car => (
<div ref={ref => this.carRefs[car.id] = ref} key={car.id}>
</div>
))
在構造函數中,您可以指定this.carRefs = {};
。
現在,您可以從componentDidMount
中的this.carRefs
對象訪問您的汽車。
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.