我想在 Node.js TypeScript 项目中禁用 DOM 类型定义。我已经使用下面代码片段中显示的配置配置了 TypeScript。尽管明确将该"lib"属性设置为["ES2016"]，VS Code 仍然建议lib.dom.d.ts自动完成。lib.dom.d.ts该项目似乎从驻留在 VS Code 中的定义文件（特别是~/.vscode/extensions目录，而不是目录）中提取定义。node_modules最终结果似乎是运行时错误。显然 Node.js 对 DOM 库没有用处；是有一些方法可以禁用 DOM 库吗？
使用下面的配置（如上所述）不起作用。
{
"compilerOptions": {
"lib": ["ES2016"],
"target": "es6",
"module": "commonjs",
"skipLibCheck": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"allowJs": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"inlineSourceMap": true,
"importHelpers": true,
"alwaysStrict": true,
"strict": true,
"outDir": "build",
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"typeRoots": ["./node_modules/@types", "./typings"],
"baseUrl": ".",
"paths": {
"#root/*": ["./*"]
}
},
"include": [ …configuration node.js typescript tsconfig visual-studio-code
组件安装时，我尝试着眼于输入。输入组件是样式组件，因此我使用innerRef来获取对该元素的引用。但是，安装组件时，输入不会获得焦点。我检查了该节点是否实际上正在获取对DOM节点的引用。我的逻辑找不到任何问题。谢谢您的帮助。
import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import styled, { keyframes } from 'styled-components';
const UrlInput = styled.input`
width: 400px;
height: 34px;
background-color: white;
display: inline-block;
outline: none;
padding-left: 10px;
font: 400 14px 'Source Sans Pro', 'sans-serif';
::placeholder {
color: rgb(100,100,100);
font: 400 14px 'Source Sans Pro', 'sans-serif';
}
`
class AddUrl extends React.Component {
constructor(props) {
super(props);
this.state = {
url: ''
}
this.inputRef = React.createRef();
}
componentDidMount() {
const node = …我使用 userID 和 iat（issues at）签署 JWT（JSON Web 令牌），如下所示
jwt.encode({sub: user.id, iat: timestamp}, jwtSecret);
当我从客户端收到 JWT 时，我对其进行解码以提取用户 ID。每次我需要允许用户访问安全路由时，我是否需要通过检查它在数据库中的存在来验证用户 ID（参见第一个示例）？或者我可以假设用户就是她所说的那个人，并允许她访问安全路径？
我的感觉是我需要访问数据库来验证每个请求的用户，这会很昂贵并且违背了使用 JWT 的目的。
我正在使用下面的函数来比较两张地图。有趣的是 for 循环中的代码永远不会执行。因此，console.log(key,val)代码永远不会执行。当然，我确保我正在比较的地图不为空且大小相同，以强制执行 for 循环内的代码。我是在犯一个非常愚蠢的错误还是遗漏了一个深刻的概念？
private compareMaps(map1, map2) {
var testVal;
if (!(map1 && map2)) {
return false;
}
if (map1.size !== map2.size) {
return false;
}
for (var [key, val] of map1) {
testVal = map2.get(key);
console.log(key, val);
if (testVal !== val || (testVal === undefined && !map2.has(key))) {
return false;
}
}
return true;
}
我想要一个.tag-preview-containerflex item(.image-container)的绝对定位子元素()来重叠DOM中的其他元素(例如标题.header).我z-index将绝对定位元素设置为2(即使1应该工作).但是,该元素不会与flex容器(.tags-panel)外部的任何DOM元素重叠.事实上,它完全被容器切断了.我没有设置DOM中任何其他元素的z-index,因此根应该是堆叠上下文.
<div class="panel-container">
<div class="header">
</div>
<div class="tags-panel">
<div class="image-container">
<div class="tag-preview-container">
</div>
</div>
<div class="image-container">
</div>
<div class="image-container">
</div>
<div class="image-container">
</div>
</div>
</div>
这是scss代码,这里是JSFiddle
.panel-container {
width: 400px;
height: 400px;
position: relative;
margin: auto;
.header {
width: 100%;
height: 40px;
background-color: green;
}
.tags-panel {
position: absolute;
background-color: red;
top: 40px;
bottom: 0px;
width: 100%;
overflow-y: auto;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
} …使用引导程序，我试图在合理的按钮组中的按钮之一内创建一个下拉菜单。更具体地说，我希望下拉菜单列表元素与下拉切换按钮具有相同的宽度。下面的代码执行所有操作，除了下拉元素的宽度与切换按钮不同之外。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.pull-right{
margin-top: 7px
}
</style>
</head>
<body>
<div class="container">
<h2>Justified Button Groups</h2>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<div class="dropdown btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Sony<span class="caret pull-right"></span></button>
<ul class="dropdown-menu">
<li><a href="#" class="btn btn-default btn-block">HTML</a></li>
<li><a href="#" class="btn btn-default btn-block">CSS</a></li>
<li><a href="#" class="btn btn-default btn-block">JavaScript</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
css ×2
node.js ×2
typescript ×2
css3 ×1
flexbox ×1
html ×1
iterator ×1
javascript ×1
jwt ×1
jwt-simple ×1
reactjs ×1
tsconfig ×1
webpack ×1
webpack-4 ×1
z-index ×1