小编tim*_*imo的帖子

我如何在 React 组件内定位 DOM 元素,或者我应该避免同时定位 DOM 元素?

我创建了一个脚本,该脚本在父容器上的鼠标悬停时激活,并且应该将其子元素从鼠标移开。我目前已经让它工作了,但代码的某些部分似乎与 REACT 代码的外观相矛盾。特别是两部分。

  1. 我在渲染函数中使用了一个计数器,以便每个跨度都能获得正确的自定义属性,state.customProperties该自定义属性是一个数组,该数组在父元素鼠标悬停时更新自定义属性。

    render() {
        let counter = 0;
        const returnCustomProp = function(that) {
            counter++;
            let x = 0;
            if (that.state.customProperties[counter - 1]) {
                x = that.state.customProperties[counter - 1].x;
            }
            let y = 0;
            if (that.state.customProperties[counter - 1]) {
                y = that.state.customProperties[counter - 1].y;
            }
            return "customProperty(" + x + " " + y + ")";
        }
        return (
            <div onMouseMove={this._testFunction} id="ParentContainer">
                    <section custom={returnCustomProp(this)}>
                        <b>Custom content for part 1</b>
                        <i>Could be way different from all the other …
    Run Code Online (Sandbox Code Playgroud)

dom reactjs

9
推荐指数
1
解决办法
727
查看次数

如何在拖动目标元素时启用滚动?

我有2个未分类的列表,一起浮动.右侧列表中的项目可以拖动到左侧列表中.

<ul class="static sortable connected-sortable">
        <li class="not-sortable">Item 1<div class="hint">Sleep hier uw bestand</div></li>
        <li class="not-sortable">Item 2<div class="hint">Sleep hier uw bestand</div></li>
        <li class="not-sortable">Item 3<div class="hint">Sleep hier uw bestand</div></li>
        <li class="not-sortable">Item 4<div class="hint">Sleep hier uw bestand</div></li>
        <li class="not-sortable">Item 5<div class="hint">Sleep hier uw bestand</div></li>
        <li class="not-sortable">Item 6<div class="hint">Sleep hier uw bestand</div></li>
</ul>

<ul class="sortable connected-sortable right">

    <li class="sortableRow">Item sortable 1</li>
    <li class="sortableRow">Item sortable 2</li>
    <li class="sortableRow">Item sortable 3</li>
    <li class="sortableRow">Item sortable 4</li>
    <li class="sortableRow">Item sortable 5</li>
    <li class="sortableRow">Item sortable 6</li>

</ul>
Run Code Online (Sandbox Code Playgroud)

我的左侧列表有一个滚动条.

当我将项目从右侧列表拖到左侧列表时,我想为此左侧列表启用滚动.因此,当我在左侧列表的底部或顶部边缘附近拖动时,左侧列表中的滚动条会向下或向上移动.

问题是滚动功能仅对原始列表启用,原始列表是项目来自的列表,此时根本没有滚动条. …

jquery list jquery-ui-sortable

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

如何在Windows的npm脚本中使用变量

我有一个光秃秃的存储库,我们可以从中开始新的项目。在该存储库内是另一个必须单独更新的存储库。每个项目都从这两个资源库开始,但是有时在项目过程中不应同时更新它们。

我正在尝试创建一个Npm脚本来克隆父存储库,然后打开文件夹并克隆子存储库。

该脚本具有代表项目的变量,因此代表文件夹名称。

基于此答案,我提出了以下建议:

"new_project": "git clone x:/parent_repo $PROJECT & cd $PROJECT & git clone x:/child_repo"
Run Code Online (Sandbox Code Playgroud)

我运行命令,如下所示:PROJECT=new_project_name npm run new_project 也曾尝试PROJECT="new_project_name" npm run new_project

不幸的是,这创建了一个文件夹$PROJECT,而不是实际读取变量。

还尝试了:

"new_project": "git clone x:/parent_repo $PROJECT & cd $PROJECT & git clone x:/child_repo"

npm run new_project --PROJECT new_project_name
Run Code Online (Sandbox Code Playgroud)

或与

npm run new_project -- --PROJECT=new_project
Run Code Online (Sandbox Code Playgroud)

结果相同。

这些解决方案中的大多数似乎都可以在Linux机器上使用,但不适用于Windows。

看来字符串中的变量没有被读取。我试过了

"git clone x:/parent_repo "+$PROJECT+" & cd "+$PROJECT+" & git clone x:/child_repo" 
Run Code Online (Sandbox Code Playgroud)

但这只是给我语法错误。

如何从命令行成功传递可以在npm脚本中使用的变量?

该命令必须为一行。

我正在Windows上使用Git bash作为cli

npm版本:2.14.20

npm

6
推荐指数
2
解决办法
5834
查看次数

如何防止多行文本填充父元素的整个宽度

假设我有一个具有设定宽度的容器元素。我有一个带有显示内联块的内容元素,可以包含一些文本。该文本可能太大,以至于必须填写好几行。这样做的问题是,多行文本的默认行为是将元素增长到父元素的完整宽度。

想象一下下面的例子:

HTML:

<div class="container">
  <div class="content">
    Firstreallongword11 Secondalsolongword22 Thirdwordthatisconsiderablylonger
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.container {
  width: 260px;
  border: solid blue 1px;
}
.content {
  display: inline-block;
  background: red;
}
Run Code Online (Sandbox Code Playgroud)

由于这些单词很长,因此它们将放置在多行上。我对该元素的期望.content是,它会增长到单行上最大单词的最大宽度。但正如您所看到的,因为它由多行组成,所以元素增长到最大宽度.container

小提琴

我想要实现的是,.content获得单行上最大项目的宽度,就像使用一个单行一样:

小提琴

有什么方法可以用纯 css/html 来实现这一点吗?

css text multiline

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

在使用带有本机 javascript 的appendChild 后,如何更新对 HTML 元素的引用

我正在使用本机 javascript 将一个元素附加到我的 DOM,该元素在 X 秒后消失。

为了附加该元素,我创建了一个带有函数的文档片段,createHTML然后将该元素附加到我的容器元素中。

var elementHTML = '<div>Test element appended</div>';
    elementHTML = createHTML(elementHTML);      
document.getElementById('append-container').appendChild(elementHTML);
Run Code Online (Sandbox Code Playgroud)

然后我设置一个超时,在 x 秒后从 DOM 中删除该元素

setTimeout(function() {
    elementHTML.parentNode.removeChild(elementHTML);
}, 2000, elementHTML); 
Run Code Online (Sandbox Code Playgroud)

现在这不起作用,因为当您使用appendChild时,元素会被移动并且对元素的引用会丢失。我正在寻找一种方法来更新对elementHTML我刚刚附加到 DOM 的元素的引用。

基本上我正在寻找 jQuery 参考功能而不使用 jQuery。

我可以使用随机生成的 ID 来定位元素,或者添加一个类并循环遍历具有该类的所有元素并定位最后一个元素,但这些方法感觉很难看。

我想知道当您向 DOM 附加某些内容以定位刚刚附加的内容时是否存在某种回调,或者我的逻辑是否完全错误。

小提琴

javascript appendchild

5
推荐指数
1
解决办法
2941
查看次数

如何计算上传的剩余时间?

在我的jQuery 文件上传器中,我有以下可用变量:uploadedBytes,totalBytestimeStarted.

如何使用这些变量计算上传的剩余时间?我遇到了一个涉及uploadSpeed变量的类似问题。

我可以uploadSpeed从这些变量中推断出吗?或者我能否仅使用这三个变量来计算剩余时间?

javascript upload jquery

0
推荐指数
1
解决办法
5682
查看次数

如果数组项具有相应的数组值,如何合并?

我有一个包含子数组的javascript数组,这些子数组有两个值,一年和一个数字

var abc = [["2012", "399"], 
           ["2012", "114"], 
           ["2012", "151"], 
           ["2013", "116"], 
           ["2013", "145"], 
           ["2013", "280"], 
           ["2013", "84"], 
           ["2014", "5"], 
           ["2014", "228"], 
           ["2014", "156"], 
           ["2014", "43"], 
           ["2014", "27"]];
Run Code Online (Sandbox Code Playgroud)

我希望得到每年第二个值的总和.所以对于我的示例数组,我想要以下输出:

Year: 2012 Sum: 664

Year: 2013 Sum: 625

Year: 2014 Sum: 459
Run Code Online (Sandbox Code Playgroud)

我几乎坚持检查第一个值并将它们添加到数组中.

在这里找到好消息

有关比较数组中第一个值的建议吗?

javascript arrays jquery

0
推荐指数
1
解决办法
78
查看次数