我根据它们在视口中的位置设置了几个React.js组件的动画.如果组件位于视口中,则将不透明度设置为1,如果它不在视口中,则将其不透明度设置为0.我使用getBoundingClient()'s top和bottom属性来确定组件是否在视口内.
ComponentA显示了其他B,C和D组件所遵循的模式.他们每个人都在听window滚动事件.
这是"React"方法,每个组件必须添加一个事件监听器window吗？同一窗口上有多个滚动事件侦听器？
或者有一种更好的方法是在Home所有者组件中将滚动事件监听器添加到窗口一次？然后ownee子组件仍然能够使用getBoundingClient()？知道它们在DOM中的位置？
Home = React.createClass({
render: function() {
<div>
<ComponentA />
<ComponentB />
<ComponentC />
<ComponentD />
</div>
};
});
ComponentA = React.createClass({
componentDidMount: function() {
window.addEventListener('scroll', this.handleScroll);
},
componentWillUnmount: function() {
window.removeEventListener('scroll', this.handleScroll);
},
handleScroll: function() {
var domElement = this.refs.domElement.getDOMNode();
this.inViewPort(domElement);
},
inViewPort: function(element) {
var elementBounds = element.getBoundingClientRect();
(elementBounds.top <= 769 && elementBounds.bottom >= 430) ? TweenMax.to(element, 1.5, { opacity: 1 …父组件：
function ParentComponent() {
return (
<section>
<ChildComponent ref={sectionRef} ref1={headerRef} />
</section>
);
}
子组件：
function ChildComponent(props) {
return (
<section ref={props.ref}>
<article>
<h2 ref={props.ref1}>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!</p>
</article>
</section>
);
}
我的目标是能够从父组件中定位子组件中的不同 DOM 元素，以便我可以根据父组件的滚动事件为它们设置动画。
我尝试将引用作为不同的数据结构传递：
<ChildComponent ref={{sectionRef, headerRef}} />
和：
<ChildComponent ref={[sectionRef, headerRef]} />
和：
<ChildComponent section={sectionRef} header={headerRef} …我有一个 json 文件，我将其加载到 Three.js ObjectLoader 中，然后将其渲染在屏幕上 - 它会旋转，并且我可以根据我单击的颜色来更改其颜色 - 没什么大不了的。
我有一个显示产品列表的列表页面http://domain.com/products。我单击产品标题，然后转到http://domain.com/products/product-name显示 THREEjs 渲染的页面。
问题是我不知道如何处理三号的清理工作。据我所知，他们componentWillUnmount()负责处理清理工作。我应该在其中放置什么componentWillUnmount()才能清理任何 webGL 上下文，或释放内存，或清理任何孤立的对象？
我尝试过的一些事情：
如果我将 中的所有变量设置为 null componentWillUnmount()，然后返回页面http://domain.com/products，我会一遍又一遍地收到错误customize-bow.js:171 Uncaught TypeError: Cannot read property 'render' of null- 这意味着 window.requestAnimationFrame() 尚未取消。
如果我没有componentWillUnmount()，我不相信内存被清除
如果路由加载新组件和新 DOM，webGL 不会被清除，这是怎么回事？关于如何处理这个问题有什么想法吗？
这是代码：
import React from 'react'
import BowDetails from './bow-details'
import * as THREE from 'three'
import axios from 'axios'
var OBJLoader = require('three-obj-loader')(THREE)
var OrbitControls = require('three-orbit-controls')(THREE)
export default …我有一个 Parent 组件，它充当其子组件的包装器。如何将道具传递给将使用以下格式呈现的孩子？
import React, { useEffect, useState } from 'react';
const Parent = ({ children }) => {
const [completeState, setCompleteState] = useState(false);
useEffect(
() => {
/* .. code that runs then sets completeState to true */
setCompleteState(true);
}, []
);
return (
<section>
/*
how to pass a 'didComplete' prop to children?
didComplete={completeState}
*/
{children} // Child component below would be rendered here with the didComplete prop passed in
</section>
)
}
import React from 'react';
const …我有一个显示为CompositeView的工具集合.此集合中的每个呈现的项目都是ItemView.保存它们的区域的名称称为toolNameRegion.
我在该页面中有另一个名为toolDetailsRegion的区域,它应该在toolNameRegion中呈现所单击工具的属性.
这是观点:
@Tools.module "AboutApp.Show", (Show, App, Backbone, Marionette, $, _) ->
class Show.Layout extends Backbone.Marionette.Layout
template: JST['backbone/apps/about/templates/about']
regions:
toolNameRegion: "#tool-name"
toolDetailsRegion: "#tool-details"
class Show.Tool extends Backbone.Marionette.ItemView
template: JST['backbone/apps/about/templates/_tool']
tagName: "li"
events:
"click a.tool-link" : ->
@trigger "tool-name:link:clicked", @model # How the hell do I pass this to the Show.ToolDetail class?
console.log @model # shows the model attributes that was clicked
class Show.Tools extends Backbone.Marionette.CompositeView
template: JST['backbone/apps/about/templates/tools']
itemView: Show.Tool
itemViewContainer: "ul"
triggers:
"click .tool-link" : "tool:link:clicked"
class Show.ToolDetail extends Backbone.Marionette.ItemView …我已经浏览了https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
我很好奇是否有更好的方法将当前点击的面板名称传递给handlePanelClick().行let currentPanel = eval(此$ {name}的面板);就是我所关心的.
我需要name进行评估,然后将其设置为currentPanel的一部分.如果我删除eval()to just 'this.${name}Panel',则currentPanel不是DOM元素.
这是使用eval()的正确用例吗？
export default class Profiles extends Component {
constructor(props) {
super(props);
this.ul, this.hunterPanel, this.fieldPanel, ...
// other declarations...
this.handlePanelClick = this.handlePanelClick.bind(this);
}
handlePanelClick(event, name) {
event.preventDefault();
const currentScrollPosition = this.ul.scrollLeft;
let currentPanel = eval(`this.${name}Panel`); // <-- is this good practice or is there a better way? Removing eval() means `this` is a string and not a reference …