我按照本指南" thejsway"来自GitHub,本课程是关于元素动画的。
此代码由作者提供,但我无法弄清楚变量"阻止"在这一行:
state = {
activeTab: 'a'
};
handleChange = (activeTab) => {
this.setState({ activeTab});
};
render = () => (
<Tabs
value={this.state.activeTab}
onChange={this.handleChange}
>
<Tab label="Tab A" value="a">
<div>
<h2>Controllable Tab A</h2>
<p>
Tabs are also controllable if you want to programmatically pass them their values.
This allows for more functionality in Tabs such as not
having any Tab selected or assigning them different values.
</p>
</div>
</Tab>
<Tab label="Tab B" value="b">
<div>
<h2>Controllable Tab B</h2>
<p>
This is another example of a controllable tab. Remember, if you
use controllable Tabs, you need to give all of your tabs values or else
you wont be able to select them.
</p>
</div>
</Tab>
</Tabs>
);
正在处理来自'block.style.left = (xBlock + movement) + "px" '
的变量blockElement的工作,我认为它是对同一元素的引用?
不应该是const blockElement = document.getElementById("block");
而不是blockElement
吗?当block
未在任何地方声明时,它是如何工作的?
整个代码:
block
答案 0 :(得分:4)
这个块和blockElement一样吗?如何?
几乎可以肯定,是的。 block
是一个自动全局的。在浏览器中,具有id
的元素会自动成为window
对象的属性,除非其他东西取代它们;该对象的属性也是全局变量。 window
属性的详细信息位于the HTML specification。 window
对象也是JavaScript全局对象的事实略微巧妙地涵盖here。全局对象的属性是全局对象in the JavaScript spec。
依赖于此通常是一个坏主意™,因为:
<div id="name"></div>
的自动全局广告,因为全局name
意味着其他内容。正如您所确定的那样,在这种情况下,作者似乎意味着blockElement
。使用block
时,只有一个拼写错误,或者他/她之后决定重命名的变量的原始名称。
答案 1 :(得分:1)
基于this blog post中提供的详细说明和示例:
HTML5 standard指定
window
对象必须具有 属性 key ,其值为 elem if ...
- 只有一个DOM元素 elem ,其属性
id
的值为 key 。- 只有一个DOM元素 elem ,其属性
name
的值为 key 。 elem 的标记必须是以下之一:a,applet,area,embed,form, 框架,框架集,iframe,img,对象。
在技术较少的情况下,浏览器会为id
的唯一div
创建一个全局变量。但是,使用它似乎是一种不好的做法,你应该依赖var block = document.getElementById('block');
这样的东西来确保不会出现任何问题。