我已经在React中构建了一个组件,该组件应该在窗口滚动时更新其自身的样式以创建视差效果。
组件render
方法如下所示:
function() {
let style = { transform: 'translateY(0px)' };
window.addEventListener('scroll', (event) => {
let scrollTop = event.srcElement.body.scrollTop,
itemTranslate = Math.min(0, scrollTop/3 - 60);
style.transform = 'translateY(' + itemTranslate + 'px)');
});
return (
<div style={style}></div>
);
}
这是行不通的,因为React不知道组件已更改,因此该组件不会重新渲染。
我试过itemTranslate
在组件状态下存储的值,并setState
在滚动回调中调用。但是,这使滚动无法使用,因为这非常慢。
关于如何做到这一点的任何建议?
您应该在中绑定侦听器componentDidMount
,这样,侦听器仅创建一次。您应该能够将样式存储在状态中,侦听器可能是导致性能问题的原因。
像这样:
componentDidMount: function() {
window.addEventListener('scroll', this.handleScroll);
},
componentWillUnmount: function() {
window.removeEventListener('scroll', this.handleScroll);
},
handleScroll: function(event) {
let scrollTop = event.srcElement.body.scrollTop,
itemTranslate = Math.min(0, scrollTop/3 - 60);
this.setState({
transform: itemTranslate
});
},
问题内容: 在开始使用React.js之后,似乎是静态的(从父组件传入),而基于事件的更改则似乎是静态的。但是,我在文档中注意到对的引用,其中具体包括以下示例: 这似乎意味着,性能可以改变根据的比较组件来。我想念什么?道具如何更改,或者我误认为道具的调用位置? 问题答案: 除非组件是数组或对象,否则组件不能更新其自身的props(即使可能,组件也要更新其自己的props是反模式),但是可以更新其状
问题内容: 我正在使用样式组件,并试图设置这样的背景图片 我也试过不加引号 在两种情况下,我都得到相同的结果 http:// localhost:3000 / assets / image.png 加载资源失败:服务器响应状态为404(未找到) 我正在使用Richard Kall的React Starter 该文件肯定在指定的位置。 我加载不正确吗? 我应该提一下,我对此非常陌生(React和样式
本文向大家介绍在React.js中样式化,包括了在React.js中样式化的使用技巧和注意事项,需要的朋友参考一下 React.js的样式可以通过以下两种方式完成 CSS样式表 内联样式 首先来看CSS样式表 我们有App.js文件,如下所示- 在App.js文件中,我们导入了一个包含CSS类myColoredText的App.css文件 请注意 我们在属性className的双引号中使用了CSS
我正在开发一个带有样式组件的反应应用程序,我有一个组件“导航”。在这个组件中有更多的组件,如,等。Header例如是这样声明的: 问题是,我在不同的文件中有这个导航组件,对于所有文件,样式都很好,但现在我只想在其中一个文件中更改标题组件的背景色,它位于(?)导航组件。我该怎么做?我知道可以用const NewNav=styled(导航)之类的东西从导航组件更改样式,`但是标题呢? 先谢谢你。
本文向大家介绍React.js中的高阶组件,包括了React.js中的高阶组件的使用技巧和注意事项,需要的朋友参考一下 高阶部分简称为hoc。这是一种接收组件并返回具有附加功能的新组件的模式。 // hoc是自定义JavaScript函数的名称 我们使用带有状态和/或道具的组件来构建UI。hoc用类似的方法从提供的组件中构建一个新组件。 使用hoc在React中成为一个横切关注点。这些组件将负责单
问题内容: 我正在react.js中处理单个页面应用程序,那么在页面转换或浏览器后退/前进时更新元标记的最佳方法是什么? 问题答案: 我在一个较旧的项目中使用了react-document-meta。 只需定义您的元值 并放置一个 在回报