我有一个应用程序，我需要动态设置一个元素的高度(让我们说“app-content”)。它取应用程序的“chrome”的高度并减去它，然后设置“app-content”的高度以100%符合这些限制。这是超级简单的香草JS, jQuery，或骨干视图，但我努力弄清楚正确的过程将在React中这样做?
下面是一个示例组件。我想要能够设置应用内容的高度为窗口的100%减去动作栏和BalanceBar的大小，但我怎么知道什么时候所有的渲染和哪里我将把计算的东西在这个反应类?
/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
render: function () {
return (
<div className="wrapper">
<Sidebar />
<div className="inner-wrapper">
<ActionBar title="Title Here" />
<BalanceBar balance={balance} />
<div className="app-content">
<List items={items} />
</div>
</div>
</div>
);
}
});
module.exports = AppBase;
使用componentDidUpdate或componentDidMount的一个缺点是，它们实际上是在dom元素完成绘制之前执行的，而是在它们从React传递到浏览器的dom之后。
比如说，如果你需要set node。到呈现节点的scrollHeight。scrollTop，那么React的DOM元素可能不够。你需要等到元素被画完才能得到它们的高度。
解决方案:
使用requestAnimationFrame来确保你的代码在绘制新渲染的对象后运行
scrollElement: function() {
// Store a 'this' ref, and
var _this = this;
// wait for a paint before running scrollHeight dependent code.
window.requestAnimationFrame(function() {
var node = _this.getDOMNode();
if (node !== undefined) {
node.scrollTop = node.scrollHeight;
}
});
},
componentDidMount: function() {
this.scrollElement();
},
// and or
componentDidUpdate: function() {
this.scrollElement();
},
// and or
render: function() {
this.scrollElement()
return [...]
我建议你使用钩子。
它们可以从16.8.0版本开始使用。
你可以在react的官方文档中查看这个钩子的行为。
就像这样:
import React, { useEffect } from 'react'
const AppBase = ({ }) => {
useEffect(() => {
// set el height and width etc.
}, [])
return (
<div className="wrapper">
<Sidebar />
<div className="inner-wrapper">
<ActionBar title="Title Here" />
<BalanceBar balance={balance} />
<div className="app-content">
<List items={items} />
</div>
</div>
</div>
);
}
export default AppBase
使用componentDidUpdate或componentDidMount的一个缺点是，它们实际上是在dom元素完成绘制之前执行的，而是在它们从React传递到浏览器的dom之后。
比如说，如果你需要set node。到呈现节点的scrollHeight。scrollTop，那么React的DOM元素可能不够。你需要等到元素被画完才能得到它们的高度。
解决方案:
使用requestAnimationFrame来确保你的代码在绘制新渲染的对象后运行
scrollElement: function() {
// Store a 'this' ref, and
var _this = this;
// wait for a paint before running scrollHeight dependent code.
window.requestAnimationFrame(function() {
var node = _this.getDOMNode();
if (node !== undefined) {
node.scrollTop = node.scrollHeight;
}
});
},
componentDidMount: function() {
this.scrollElement();
},
// and or
componentDidUpdate: function() {
this.scrollElement();
},
// and or
render: function() {
this.scrollElement()
return [...]
我也遇到了同样的问题。
在大多数情况下，在componentDidMount()中使用类似hack的setTimeout(() =>{}， 0)是有效的。
但不是在特殊情况下;我不想使用ReachDOM findDOMNode，因为文档说:
注意:findDOMNode是一个用于访问底层DOM的escape hatch
节点。在大多数情况下，不鼓励使用这个逃生口，因为
它穿透了组件抽象。
(来源:findDOMNode)
所以在那个特定的组件中，我必须使用componentDidUpdate()事件，所以我的代码最终是这样的:
componentDidMount() {
// feel this a little hacky? check this: http://stackoverflow.com/questions/26556436/react-after-render-code
setTimeout(() => {
window.addEventListener("resize", this.updateDimensions.bind(this));
this.updateDimensions();
}, 0);
}
然后:
componentDidUpdate() {
this.updateDimensions();
}
最后，在我的例子中，我必须删除componentDidMount中创建的侦听器:
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions.bind(this));
}
对于功能性组件，您可以react-use-call-onnext-render，它是一个自定义钩子，允许在以后的渲染上安排回调。
在我的另一个项目中成功地使用了它。
如果需要dom元素的维度，
请看这个例子，它是react-use-call-onnext-render例子的第三个例子:
假设我们想要获取一个可移动DOM元素的尺寸，假设是由showBox状态控制的div
变量。为此，我们可以使用getBoundingClientRect()。但是，我们希望只在元素之后调用这个函数
挂载到dom中，因此将调度此调用在负责显示此元素的变量之后渲染一次
在dom中已经改变了，这个变量是showBox，所以他将是useCallOnNextRender的依赖:
const YourComponent = () => {
const [showBox, setShowBox] = useState(false)
const divRef = useRef()
const callOnNextShowBoxChange = useCallOnNextRender()
return (
<>
<div style={canvasStyle} id="canvas">
<button style={boxStyle} onClick={() => {
setShowBox(!showBox)
callOnNextShowBoxChange(() => console.log(divRef.current.getBoundingClientRect())) //right value
}}>toggle show box
</button>
<div style={{border: "black solid 1px"}} ref={divRef}>
{showBox ? <div style={boxStyle}>box2</div> : null}
</div>
</div>
</>
);
};
