我的图书馆位于https://github.com/nitinkushwaha/react-sticky-scroll-spy
因此，当我将此库导入到我的项目中时，componentDidMount 函数不会执行，并且所有其他函数都运行良好。
库文件位置 https://github.com/nitinkushwaha/react-sticky-scroll-spy/blob/master/src/react-sticky-scroll-spy.js
代码是:
import React from 'react';
class ReactStickyScrollSpy extends React.Component{
constructor (props) {
console.log('was in constructor');
super(props);
this.easingEffects = {
linear: function(t) {
return t
},
easeInQuad: function(t) {
return t * t
},
easeOutQuad: function(t) {
return -1 * t * (t - 2)
},
easeInOutQuad: function(t) {
return (t /= .5) < 1 ? .5 * t * t : -.5 * (--t * (t - 2) - 1)
},
easeInCubic: function(t) {
return t * t * t
},
easeOutCubic: function(t) {
return 1 * ((t = t / 1 - 1) * t * t + 1)
},
easeInOutCubic: function(t) {
return (t /= .5) < 1 ? .5 * t * t * t : .5 * ((t -= 2) * t * t + 2)
},
easeInQuart: function(t) {
return t * t * t * t
},
easeOutQuart: function(t) {
return -1 * ((t = t / 1 - 1) * t * t * t - 1)
},
easeInOutQuart: function(t) {
return (t /= .5) < 1 ? .5 * t * t * t * t : -.5 * ((t -= 2) * t * t * t - 2)
},
easeInQuint: function(t) {
return 1 * (t /= 1) * t * t * t * t
},
easeOutQuint: function(t) {
return 1 * ((t = t / 1 - 1) * t * t * t * t + 1)
},
easeInOutQuint: function(t) {
return (t /= .5) < 1 ? .5 * t * t * t * t * t : .5 * ((t -= 2) * t * t * t * t + 2)
},
easeInSine: function(t) {
return -1 * Math.cos(t / 1 * (Math.PI / 2)) + 1
},
easeOutSine: function(t) {
return 1 * Math.sin(t / 1 * (Math.PI / 2))
},
easeInOutSine: function(t) {
return -.5 * (Math.cos(Math.PI * t / 1) - 1)
},
easeInExpo: function(t) {
return 0 === t ? 1 : 1 * Math.pow(2, 10 * (t / 1 - 1))
},
easeOutExpo: function(t) {
return 1 === t ? 1 : 1 * (-Math.pow(2, -10 * t / 1) + 1)
},
easeInOutExpo: function(t) {
return 0 === t ? 0 : 1 === t ? 1 : (t /= .5) < 1 ? .5 * Math.pow(2, 10 * (t - 1)) : .5 * (-Math.pow(2, -10 * --t) + 2)
},
easeInCirc: function(t) {
return 1 > t ? -1 * (Math.sqrt(1 - (t /= 1) * t) - 1) : t
},
easeOutCirc: function(t) {
return 1 * Math.sqrt(1 - (t = t / 1 - 1) * t)
},
easeInOutCirc: function(t) {
return (t /= .5) < 1 ? -.5 * (Math.sqrt(1 - t * t) - 1) : .5 * (Math.sqrt(1 - (t -= 2) * t) + 1)
},
easeInElastic: function(t) {
var e = 1.70158,
n = 0,
i = 1;
return 0 === t ? 0 : 1 == (t /= 1) ? 1 : (n || (n = .3), i < Math.abs(1) ? (i = 1, e = n / 4) : e = n / (2 * Math.PI) * Math.asin(1 / i), -(i * Math.pow(2, 10 * (t -= 1)) * Math.sin(2 * (1 * t - e) * Math.PI / n)))
},
easeOutElastic: function(t) {
var e = 1.70158,
n = 0,
i = 1;
return 0 === t ? 0 : 1 == (t /= 1) ? 1 : (n || (n = .3), i < Math.abs(1) ? (i = 1, e = n / 4) : e = n / (2 * Math.PI) * Math.asin(1 / i), i * Math.pow(2, -10 * t) * Math.sin(2 * (1 * t - e) * Math.PI / n) + 1)
},
easeInOutElastic: function(t) {
var e = 1.70158,
n = 0,
i = 1;
return 0 === t ? 0 : 2 == (t /= .5) ? 1 : (n || (n = .3 * 1.5), i < Math.abs(1) ? (i = 1, e = n / 4) : e = n / (2 * Math.PI) * Math.asin(1 / i), 1 > t ? -.5 * i * Math.pow(2, 10 * (t -= 1)) * Math.sin(2 * (1 * t - e) * Math.PI / n) : i * Math.pow(2, -10 * (t -= 1)) * Math.sin(2 * (1 * t - e) * Math.PI / n) * .5 + 1)
},
easeInBack: function(t) {
var e = 1.70158;
return 1 * (t /= 1) * t * ((e + 1) * t - e)
},
easeOutBack: function(t) {
var e = 1.70158;
return 1 * ((t = t / 1 - 1) * t * ((e + 1) * t + e) + 1)
},
easeInOutBack: function(t) {
var e = 1.70158;
return (t /= .5) < 1 ? .5 * t * t * (((e *= 1.525) + 1) * t - e) : .5 * ((t -= 2) * t * (((e *= 1.525) + 1) * t + e) + 2)
},
easeInBounce: function(t) {
return 1 - easingEffects.easeOutBounce(1 - t)
},
easeOutBounce: function(t) {
return (t /= 1) < 1 / 2.75 ? 7.5625 * t * t : 2 / 2.75 > t ? 1 * (7.5625 * (t -= 1.5 / 2.75) * t + .75) : 2.5 / 2.75 > t ? 1 * (7.5625 * (t -= 2.25 / 2.75) * t + .9375) : 1 * (7.5625 * (t -= 2.625 / 2.75) * t + .984375)
},
easeInOutBounce: function(t) {
return .5 > t ? .5 * easingEffects.easeInBounce(2 * t) : .5 * easingEffects.easeOutBounce(2 * t - 1) + .5
}
};
}
componentDidMount () {
console.log('was here');
window.addEventListener('scroll', this.scrollEvent.bind(this, this));
this.menuItems = this.refs.sticky.getElementsByTagName('a');
// Anchors corresponding to menu items
this.scrollItems = [];
for(var i = 0; i < this.menuItems.length; i++) {
let item = this.menuItems.item(i);
if (item.getAttribute('href').length) {
this.scrollItems.push(item);
item.addEventListener('click', this.linkClick.bind(this, this));
}
}
}
componentWillUnmount () {
console.log('was in unmount');
window.removeEventListener('scroll', this.scrollEvent);
for(var i = 0; i < this.scrollItems.length; i++) {
let item = this.scrollItems.item(i);
item.removeEventListener('click', this.linkClick);
}
}
render() {
console.log('was in render');
return (
<div ref="sticky">
<div>
{this.props.children}
</div>
</div>
);
}
scrollEvent (_self, event) {
//this.scrollItems
let cur = [];
let currentScroll = event.srcElement.body.scrollTop;
for (let i = 0; i < _self.scrollItems.length; i++) {
let href = _self.scrollItems[i].getAttribute('href');
if (href != '#') {
let elementOffsetTop = document.getElementById(href.slice(1)).offsetTop;
if (elementOffsetTop < currentScroll + _self.refs.sticky.childNodes[0].offsetHeight)
cur.push(href);
} else {
cur.push('#');
}
}
cur = cur[cur.length-1];
for (let i = 0; i < _self.menuItems.length; i++) {
if (cur == _self.menuItems[i].getAttribute('href')) {
_self.menuItems[i].parentNode.classList.add('active');
} else {
_self.menuItems[i].parentNode.classList.remove('active');
}
}
let elementHeightTop = _self.refs.sticky.offsetTop;
if (elementHeightTop <= currentScroll) {
if (!_self.isFixed) {
let elementHeight = _self.refs.sticky.childNodes[0].offsetHeight;
_self.refs.sticky.style.height = elementHeight + 'px';
let childElement = _self.refs.sticky.childNodes[0].style;
childElement.position = 'fixed';
childElement.top = '0px';
_self.isFixed = true;
}
} else {
if (_self.isFixed) {
_self.refs.sticky.style.height = 'auto';
let childElement = _self.refs.sticky.childNodes[0].style;
childElement.position = 'relative';
childElement.top = 'auto';
_self.isFixed = false;
}
}
}
linkClick (_self, event) {
event.preventDefault();
let element = event.target;
let href = element.getAttribute('href');
let offsetTop = (href === "#") ? 0 : document.getElementById(href.slice(1)).offsetTop - _self.refs.sticky.childNodes[0].offsetHeight+1;
_self.scrollToY(offsetTop);
}
scrollToY (scrollHeight) {
let _self = this;
let scrollStep = 600/15;
let currentScrollStep = 1;
requestAnimationFrame(step);
function step () {
setTimeout(function() {
if ( scrollStep >= currentScrollStep ) {
requestAnimationFrame(step);
let currentStep = (100/scrollStep)*currentScrollStep;
currentScrollStep++;
let scrollRatio = _self.easingEffects.easeInQuart(currentStep/100);
let yPosScroll = (window.scrollY - scrollHeight) * scrollRatio;
window.scrollTo( 0, ( window.scrollY - yPosScroll ));
}
}, 15 );
}
}
}
export default ReactStickyScrollSpy
开发模式可以通过 npm start 启动，url 为 localhost:3000
使用 npm run build 构建库
任何建议将不胜感激:)
最佳答案
一旦安装了{this.props.children}，该组件就会被安装。您是否尝试删除 {this.props.children} 并查看 componentDidMount() 是否触发？
这可能是其中一个子组件未渲染或破坏 JavaScript 的问题。控制台有错误日志吗？
关于javascript - 在不同项目中导入和使用时，componentDidMount 函数不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37477556/