小编aba*_*edo的帖子

如何在我的 React 组件中使用 SCSS 变量

我正在研究一个遵循这种结构的 React 项目

src |
  components |
    Footer |
      index.jsx
      styles.scss
    Header |
      index.jsx
      styles.scss
    scss |
      helpers.scss
      variables.scss
      ...
    main.scss
Run Code Online (Sandbox Code Playgroud)

在我的变量文件中,我使用了css自定义变量,因此,所有这些变量都在那里:root,我可以在我的组件样式中访问它们。

当我想创建深色时,我想使用 SCSS 函数darken,但它不评估它们并抛出一个错误,说这var(--blue)不是有效颜色。

作为解决方案,我决定将所有变量移动到 SCSS 变量中,但是在构建项目时,它会引发另一个错误,指出 a$blue未定义。

我可以使用的唯一解决方案是将变量文件包含在所有样式文件中,但是,我不知道对于我正在使用的结构是否有更好的解决方案。

sass reactjs node-sass

14
推荐指数
3
解决办法
2万
查看次数

Fetch API - 当 Content-Type 设置为 application/json 时,以 text/plain 形式发送

在我的 React 应用程序中,当我提交表单来创建新用户时,我使用fetch.

代码是这样的:

fetch('http://0.0.0.0:3000/users', {
  method: 'POST',
  mode: 'no-cors',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
}).then(response => console.log(response))
Run Code Online (Sandbox Code Playgroud)

当我检查开发人员工具下的网络选项卡中的条目时,我看到内容类型是,text/plain但我不明白为什么如果我将其设置为application/json.

Edit and send我已尝试使用请求中的选项并替换text/plain为,application/json但在发送后,它被发送为text/plain.

javascript fetch-api

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

WebSocket与OpenShift应用程序的连接失败

我用NodeJS创建了一个应用程序,我正在使用ws模块.如果我在localhost中测试应用程序它是有效的,连接websockets没有任何问题.现在我已将应用程序上传到Openshift,当我尝试从客户端访问时,它返回无法建立与websocket的连接.

如果我在我的应用程序中使用putty尾部,我会收到以下消息:DEBUG:这种类型的响应不能有一个正文.忽略传递给end()的数据.

我在服务器中的代码是:

#!/bin/env node

//Openshift variables
var ipaddress = process.env.OPENSHIFT_NODEJS_IP || "192.168.69.42";
var port = process.env.OPENSHIFT_NODEJS_PORT || 8080;


//NodeJS require modules
var Enum = require('enum');
var WebSocketServer = require('ws').Server
    wss = new WebSocketServer({host:ipaddress, port:port});
var fs = require('fs');


wss.on('connection', function(ws) {
    console.log((new Date()) + ' Connection from origin: ' + ws._socket.remoteAddress);
});

console.log((new Date()) + " Server is listening on: " + ipaddress + ':' port);
Run Code Online (Sandbox Code Playgroud)

在客户端:

var ws = new WebSocket("ws://192.168.69.42:8080/");

ws.onopen = function() { …
Run Code Online (Sandbox Code Playgroud)

javascript websocket node.js openshift

10
推荐指数
1
解决办法
7255
查看次数

如何验证html5 Datalist的输入?

我想知道如何验证来自a的输入值Datalist.我的意思是,如果我有一个Datalist用户可以开始写入值然后从中选择它的位置Datalist,但是用户决定不从列表中选择任何值并且他提交具有不完整值的表单,则发送值会错的.

我想过迭代所有的元素,Datalist但我认为如果Datalist有超过1.000的值并且我不知道任何其他方式来验证它,这不是一个好主意.

这是Datalist我要使用的一个例子:

<input type="text" list="colours">

<datalist id="colours">
    <option value="Red" data-id="1">
    <option value="Blue" data-id="2">
    <option value="Green" data-id="3">
    <option value="Black" data-id="4">
    <option value="White" data-id="5">
</datalist>
Run Code Online (Sandbox Code Playgroud)

javascript jquery html5 html-datalist

6
推荐指数
3
解决办法
9111
查看次数

试图理解递归函数的类似堆栈的行为

我正在阅读有关MDN上的函数的文章,我到达了Recursive部分,但我不明白最后一部分讨论使用类似堆栈的行为.

一个例子是:

function foo(i) {
  if (i < 0)
    return;
  console.log('begin:' + i);
  foo(i - 1);
  console.log('end:' + i);
}
foo(3);

// Output:

// begin:3
// begin:2
// begin:1
// begin:0
// end:0
// end:1
// end:2
// end:3
Run Code Online (Sandbox Code Playgroud)

在该功能上,我了解何时显示begin日志,但是当显示end日志时我不知道.有人可以帮我解释一下吗?

javascript recursion function

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

柔性物品的宽度正在减小

我正在尝试制作一个可在移动设备中水平滚动的导航菜单.要做到这一点,我想使用它flexbox,但当我设置移动视图时,导航项的宽度减少.

我尝试使用flex-growflex-basis性能将它们设置为10分别,但没有奏效.

在这种情况下,我使用导航部分的虚拟名称,但它们可以具有不同的长度.

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  overflow-y: hidden;
  overflow-x: auto;
}

li {
  flex-grow: 1;
  flex-basis: 0;
  margin-left: 10px;
}
Run Code Online (Sandbox Code Playgroud)
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

Codepen样本

html css css3 flexbox

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

Docker:ENTRYPOINT 无法执行命令,因为它找不到文件

我正在尝试从node js图像创建一个容器,并且我已经配置了我的Dockerfile如下所示:

FROM node:boron

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY package.json /usr/src/app
RUN npm install

# Bundle app source
COPY . /usr/src/app

VOLUME ./:/usr/src/app
ENTRYPOINT [ "npm run watch" ]
Run Code Online (Sandbox Code Playgroud)

package.json我有一个名为watchthan的脚本中运行名为watch-less.

如果我npm run watch在本地环境中运行该命令,但当我尝试运行容器时,它不会运行并显示下一个错误:

docker: 来自守护进程的错误响应:oci 运行时错误:container_linux.go:247:启动容器进程导致“exec:\”npm run watch\”:在 $PATH 中找不到可执行文件”。

node.js docker dockerfile

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

在ajax调用之后,砌体没有正确初始化

我正在使用此插件来设置网格库.此图库显示X个图像.ajax调用后,这些图像被加载到HTML中:

$.ajax({
    type:"POST",
    dataType:"html",
    contentType:"application/x-www-form-urlencoded",
    url:url,
    data:data,
    success:function(response) {

       $("#masonry-container").html('<div id="content">'+response+'</div>');
       initialiceMasonry();

    }
    ,timeout:10000
});
Run Code Online (Sandbox Code Playgroud)

如您所见,在附加它调用的服务器响应之后 initialiceMasonry();

var container = $("#content");

container.masonry({
    columnWidth:190,
    itemSelector:".item",
    gutter:8,

});
Run Code Online (Sandbox Code Playgroud)

在初始化之后,图像显示重叠,寻找关于此插件的另一个问题我找到了使用的选项,imagesLoaded但它返回给我这个错误:

Uncaught TypeError: undefined is not a function 
Run Code Online (Sandbox Code Playgroud)

并选择我呼叫的线路 imagesLoaded

从服务器我得到这个HTML:

    <div class="item" data-id="160">

        <img src="image_1.jpeg" />

        <div class="options">
            <h4>Section 1</h4>
            <a href="section_1.php">Section 1</a>
        </div>

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

如何正确初始化砌体以修复重叠问题?

javascript ajax jquery jquery-masonry

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