小编Lor*_*nzo的帖子

HTML 作为 Webpack 入口点

首先,我对 Web 开发完全陌生,所以如果我的方法完全错误,请直说。

我想自动构建 sass 和 ts 文件,所以我阅读了Gulp/Webpack,似乎 webpack 是要走的路。

我正在构建一个简单的单页网站,现在我只需要一个小的 javascript,所以在我看来,webpack 的入口点应该是 html 文件本身是有道理的。但是,所有的文档和教程都只讨论从.js.

有没有办法从 HTML 开始解析 js、css、图像和其他需要的东西?

我应该只使用 webpack 报废并使用 gulp 来编译打字稿和 sass 吗?

gulp webpack

6
推荐指数
1
解决办法
2764
查看次数

REACT - 将事件处理程序附加到子级

我正在尝试在 React 中创建一个 Form 组件,有点像Formik,但更简单。

我的想法是onChange为所有孩子添加一个处理程序。我正在这样做children.map()。它有效,但是我收到一个关键警告

Warning: Each child in a list should have a unique "key" prop.
Run Code Online (Sandbox Code Playgroud)

我知道没有办法抑制这种情况,所以也许有更好的方法来创建这个表单组件?<input>另外,如果不是直系孩子,我应该如何处理这种情况?

编辑:我知道如何避免这个问题,我主要想要解决这个问题的最佳方法,包括嵌套输入的情况。

这是我想如何使用它:

<Form>
  <label htmlFor="owner">Owner</label>
  <input
    type="text"
    name="owner"
    id="owner"
  />
  <label htmlFor="description">Description</label>
  <input
    type="text"
    name="description"
    id="description"
  />
  <input
    type="submit"
    value="Submit"
  />
</Form>
Run Code Online (Sandbox Code Playgroud)

这是我的代码:

import React from 'react';
    
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
    this.handleInputChange = this.handleInputChange.bind(this);
  }
    
  handleInputChange(event) {
    const target = event.target;
    const value =
      target.type …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

6
推荐指数
1
解决办法
5275
查看次数

环绕式CSS边框动画

我正在尝试使用纯CSS获得类似环绕效果的边框动画。

现在我在做它的方式是:before:after伪元素大小发生变化。一个用于顶部和右侧边框,一个用于底部和左侧边框。

但是,由于宽度和高度的差异,我得到了怪异的效果,因为每一侧花费的时间相等,但是由于宽度远大于高度,因此看起来速度要快得多。

在不事先知道div大小的情况下如何解决?

同样,也欢迎采用SCSS / vanilla CSS来获得相同动画的任何不同方法。

似乎我无法在SO上更改代码段的大小,但是如果您想玩转,这里是一个Codepen:https://codepen.io/lollobaldo2000/pen/KKPazNw?editors = 1100

* {
  box-sizing: border-box;
}

body {
  background: black;
}

.square {
  background: black;
  display: block;
  width: 500px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px auto auto -250px;
}
.square:before, .square:after {
  content: '';
  width: 0%;
  height: 0%;
  position: absolute;
  border: 1px solid #FB0;
  animation-fill-mode: forwards;
}
.square:before {
  left: 0;
  top: 0;
  border-bottom: 0;
  border-left: 0;
  animation: btm 2s …
Run Code Online (Sandbox Code Playgroud)

html css css-animations

3
推荐指数
1
解决办法
128
查看次数

Alternative to algebraic data type with lots of constructors in record syntax

I have a custom data type to contain elements of a landscape (cloud, sun, mountain, etc). I need to have a list of them, so I can't use different types and a common typeclass.

They share most of the fields in the constructor, however some have properties that other don't (for example, if the cloud is raining or not).

As of now, I have one data type with different constructors:

data Element = Sun {
  elemColorStart :: Color,
  elemColorEnd :: …
Run Code Online (Sandbox Code Playgroud)

haskell record algebraic-data-types

2
推荐指数
1
解决办法
153
查看次数

这在Haskell homerge中是什么意思::: Ord b =&gt;(a-&gt; b)-&gt; [a]-&gt; [a]-&gt; [a]

我正在学习Haskell,但我很难理解

homerge :: Ord b => (a -> b) -> [a] -> [a] -> [a]
Run Code Online (Sandbox Code Playgroud)

我们取一个元组并列出?我很困惑,请帮帮我,谢谢

因此homerge将两个排序列表合并为一个排序列表。但我不明白

homerge :: Ord b => (a -> b) -> [a] -> [a] -> [a]
Run Code Online (Sandbox Code Playgroud)

“实施高阶插入排序算法hoMergeSort与合并排序类似,不同之处在于,如果元素x放置在元素y之前,如果它fun x < fun y where fun :: a -> b是由高阶合并排序作为输入的函数。换句话说,评估hoMergeSort fun xs的结果应该是一个列表[y1,y2,...,yn]“这只是为了提供上下文的整个问题

haskell

-2
推荐指数
1
解决办法
104
查看次数