anu
anu copied to clipboard
Published
20 hours ago •
RubyLouvre
RubyLouvre
某些情况下在 componentDidUpdate 的周期内取得的 dom 元素高度不正确
当前的提交点： 33eec515c78497abc9b093187909f0914bb5ee07
这是一个可以在项目根目录中运行的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type='text/javascript' src="./dist/React.js"></script>
<script type='text/javascript' src="./lib/ReactTestUtils.js"></script>
<script type='text/javascript' src="./lib/babel.js"></script>
</head>
<body>
<div id='root' class="root">
</div>
<script type='text/babel'>
var Example = class extends React.Component {
constructor(props) {
super(props);
this.child = null;
}
componentDidMount() {
console.log('height@DidMount', this.child.offsetHeight);
}
render() {
return <div ref={(dom) => {
dom && (this.child = dom);
}}>
{this.props.children}
</div>;
}
componentDidUpdate(prevProps, prevState) {
console.log('height@DidUpdate', this.child.offsetHeight);
}
};
var Child = class extends React.Component {
constructor(props) {
super(props);
this.state = {
ok: false
}
this.child = null;
}
componentDidMount() {
setTimeout(() => {
this.setState({
ok: true
});
}, 1000);
}
render() {
return <div>
<Example>
{
this.state.ok ?
<div>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
<p>dsafjsakfjakls</p>
</div> :
<div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
<div>NULL</div>
</div>
}
</Example>
</div>;
}
}
var container = document.getElementById('root');
ReactDOM.render(
<Child />,
container,
);
</script>
</html>
示例的运行结果：
这两个值存在偏差。
如果把上面的 <div>NULL</div> 都改为 <p>NULL</p> 结果就是对的。
