我有一个 React 组件，它传递一个值对象，如下所示：
{gridColumn: '1 / 3', gridRow: '2 / 5', gridArea: 'header'}
然后添加到组件的样式，例如：
this.cell.style.setProperty('grid-area', values.gridArea);
this.cell.style.setProperty('grid-column', values.gridColumn);
this.cell.style.setProperty('grid-row', values.gridRow);
但是，使用 grid-column 和 grid-row 属性，它们会在浏览器中缩写为“grid-area: 2 / 1 / 5 / 3”的速记声明，并覆盖我的网格区域样式。
如果我将其设置为循环，也会发生这种情况：
for (let prop in values) {
this.cell.style[prop] = values[prop];
};
有一个更好的方法吗？
原谅我在这里完全没有作为JS的新手.我创建了一个非常简单的画布,其中一个矩形由keydownevents控制,另一个在rAF中围绕画布移动.
我现在想要的是,如果移动的球击中用户矩形以碰撞并反弹但是以正确的角度反弹,它不仅仅是反向击中,就像我已经尝试过但失败了.
我知道我需要计算它在用户rect上的位置,但我不知道从哪里开始,或者有人能指出我正确的方向或给我一小段做什么？
因为不需要,我会省略空间的Keycode功能.
function init() {
canvas = document.getElementById("canvasdemo");
ctx = canvas.getContext("2d");
canvasWidth = canvas.width;
canvasHeight = canvas.height;
drawSquare();
}
function drawSquare() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// user controlled square
ctx.fillStyle = "blue";
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
requestAnimationFrame(drawSquare);
if (rect.x + rect.vx > canvasWidth - 20 || rect.x + rect.vx < 0)
rect.vx = -rect.vx;
if (rect.y + rect.vy > canvasHeight - 20 || rect.y + rect.vy < 0)
rect.vy = -rect.vy;
rect.x += rect.vx;
rect.y += rect.vy; …我想要让一个球在画布周围来回反弹,然后有一些重力并最终掉落.我知道我需要在到达底部时改变速度,但我不知道应该如何完成和编码.
我是一个全新的JS学生,没有物理背景 - 这有多难？我很高兴学习等等.我试过让球碰撞并以正确的角度脱落,但现在看来我已经高高在上了.
var canvas,
ctx,
cx = 100,
cy = 150,
vx = 0,
vy = 5,
radius = 30;
function init() {
canvas = document.getElementById("gameCanvas");
ctx = canvas.getContext("2d");
circle();
}
function circle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(circle);
if (cx + radius > canvas.width || cx - radius < 0)
vx = -vx;
if (cy + radius > canvas.height || cy - radius < 0)
vy = -vy;
cx += vx;
cy += vy;
}
我已经取出cx运动只是为了上/下动画和圆形绘制代码的空间下一步将是什么？
我会将其当前速度乘以碰撞时的数字0.8,以及在何处/如何？ …
在 webpack 开发服务器上运行我的应用程序时，我的所有图像文件都在工作，无论是作为 index.html 中的 img 标签还是 background-image: url()..
尽管在生产版本中运行我的项目，但我收到了无法找到的文件引用错误。
GET file:///img/featured.png net::ERR_FILE_NOT_FOUND
GET file:///img/header-img1-1.jpg net::ERR_FILE_NOT_FOUND
我添加了 copy webpack 插件，因为我认为这会将所有图像从我的 src/img 文件夹移动到我在 dist 中的 img 文件夹。
我应该为 webpack-dev-server 使用 contentBase 选项吗？或者 copy-webpack-plugin 没有得到正确的引用？超级糊涂
项目树：
- webpack.config.js
- package.json
- .babelrc
- src
- js
- index.js
- ...
- img
- ALL IMAGES LOCATED HERE
- scss
- layout
- landing.scss
- brands.scss
- base
- index.html
我用过的landing.scss里面
background: url('~/img/img-title.png')
与brand.scss等其他文件相同
background: url('~/img/img-title.png')
这一切都很好，我想我已经对如何使用 webpack/sass 加载器引用图像感到困惑，并且似乎无法弄清楚如何让图像路径同时适用于开发/生产，我只能似乎一次让一个工作。
生产树：
- dist
- …完全陷入了深层次 - PHP 新手并做了一个简单的表单提交（创建帐户页面）以发送到 mySQL 数据库，因此对于问题的noobness 表示歉意。
我不确定如何在发送数据之前正确验证和清理数据。但是我在插入数据库时使用了 PDO 和占位符，所以我想我已经涵盖了这一方面。
<form action="createaccount.php" name="form" method="post">
<input type="text" name="createUserName" id="createUserName" placeholder="User Name"><br>
<input type="password" name="passWord" id="passWord" placeholder="Password (Min 6 Characters)"><br>
<input type="password" name="confirmPW" id="confirmPW" placeholder="Confirm Password"><br>
<input type="text" name="fName" id="fName" placeholder="First Name"><br>
<input type="text" name="sName" id="sName" placeholder="Surname"><br><br>
<input type="email" name="userEmail" id="userEmail" placeholder="Email Address"><br>
<input type="submit" value="Create Account">
</form>
这被发送到一个名为 createaccount.php 的单独 php 文件，该文件运行用户名检查，如果成功则运行一个函数，将字段发送到我的 dbHandler 类中的插入函数中。
<?php
session_start();
include('connect.php');
$username = $_POST['createUserName'];
$password = $_POST['passWord'];
$password_confirm = $_POST['confirmPW'];
$firstname = $_POST['fName'];
$surname = …最近在我们的项目中迁移到使用@typescript-eslint/parsertslint 来慢慢迁移。一切都很顺利，但我有一个小问题/问题我无法解决。
我是否需要在 tsconfig 排除数组以及导出对象上的ignorePatterns 中指定忽略文件/模式.eslintrc？有什么不同？
我们的src/lang目录中有一个 messages.js 文件，我试图忽略它，但目前在我们的 pre-commit 钩子上抛出了一个 lint 错误，这让我想知道这个问题以及这两个设置如何协同工作。
Parsing error: "parserOptions.project" has been set for '@typescript-eslint/parser'
The file does not match your project config: src/lang/messages.js. The file must be included in at least one of the projects provided
我认为我对这些交织的理解是关闭的，因为当 eslint 运行时，我认为 parserOptions 会从 tsconfig 中获取项目规则，其中排除了 js 文件。
目前，我在eslintrc 中谈论的部分如下所示：
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
project: path.resolve(__dirname, './tsconfig.json'),
tsconfigRootDir: __dirname,
useJSXTextNode: true,
sourceType: 'module', …