小编Lir*_*anC的帖子
将css注入Vue组件？
见下文my-component.vue.这个组件需要是可用的.
它需要获得extrenal css表,因为我需要允许其他开发人员自定义其内部外观.
除了接受javascript对象之外还有其他方法吗？
<template>
<div class="container">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
</div>
</template>
<style scoped>
.A {
background-color:green;
}
.B {
background-color: red;
}
.C {
background-color: yellow
}
</style>
推荐指数
解决办法
查看次数
在 Next.js 项目中集成 Sentry
我正在将 Next.js 与 AMP 一起使用。这意味着我的代码仅在服务器上运行。没有客户端代码。
我试图整合@sentry/node
然而，当我独自加入这行来index.js的/pages
const Sentry = require('@sentry/node');
构建失败并出现以下错误：
[ wait ] compiling ...
[ error ] ./node_modules/@sentry/node/esm/integrations/console.js
Module not found: Can't resolve 'console' in '/Users/lirancohen/Projects/amp-app/node_modules/@sentry/node/esm/integrations'
我将不胜感激任何帮助理解这个问题。使用 next 9.0.1 和 sentry 5.0.5
推荐指数
解决办法
查看次数
iOS Safari 键盘出现不会触发 window.resize 事件
我有一个需要响应键盘外观的布局。
- Android（版本 6+） - 当键盘出现时 -
window.resize触发。 - iOS（版本 10+） -
window.resize不会触发。
我准备了一个小 Demo，展示内部高度如何响应键盘外观。您可以点击输入以调出键盘。
// select the paragraph element
const innerHeightParagraph = document.getElementById("inner-height")
// set the innerHeight for the first time.
innerHeightParagraph.innerText = window.innerHeight
// register resize event.
window.addEventListener('resize', function() {
innerHeightParagraph.innerText= window.innerHeight
})p {
font-size:60px; margin:0px;
}<h1>Current InnerHeight</h1>
<p id="inner-height"></p>
<input></input>iOS 的建议解决方法是什么？
推荐指数
解决办法
查看次数
用颜色填充线条之间的区域 - Three.js
我有一系列线条，我需要用颜色为线条下方或线条之间的所有区域着色。
为简单起见，我创建了一个带有封闭线的片段。实际上，我有一个绘制多条线的程序（如股票市场图表），我需要为图表下方的所有区域着色。另请参见屏幕截图。
我会很感激我可能需要采取的任何帮助甚至新方法。
<html>
<head>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="https://threejs.org/build/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 500);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function createLine(startX,startY,endX,endY) {
const geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(startX, startY, 0));
geometry.vertices.push(new THREE.Vector3(endX, endY, 0));
const material = new THREE.LineBasicMaterial({
color: 0xffffff
});
return new THREE.Line(geometry, material);
} …推荐指数
解决办法
查看次数
管理对无状态组件的关注 - 反应
拥有容纳状态的容器组件.它呈现了许多无状态组件.
我想访问他们所有的DOM节点,所以我可以按需调用焦点方法.
我正在尝试这种ref方法,因为它受到反应文档的鼓励.
我收到以下错误:
Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.
推荐的解决此错误的方法是什么？最好是没有额外的dom元素包装,如exra divs.这是我目前的代码:
容器组件 - 负责呈现无状态组件.
import React, { Component } from 'react';
import StatelessComponent from './components/stateless-component.jsx'
class Container extends Component {
constructor() {
super()
this.focusOnFirst = this.focusOnFirst.bind(this)
this.state = {
words: [
'hello',
'goodbye',
'see ya'
]
}
}
focusOnFirst() {
this.node1.focus()
}
render() {
return (
<div>
{
this.state.words.map((word,index)=>{
return <StatelessComponent
value={word}
ref={node => …推荐指数
解决办法
查看次数
在从 apollo-boost 导出的 ApolloClient 中禁用缓存
我想禁用缓存或将缓存限制为 24 小时。我的 ApolloClient 只在服务器端运行。
我的环境：
- 阿波罗升压 0.4.3
- 图 14.1.1
- apollo-link-batch-http - 1.2.12
现在，这就是我配置我的ApolloClient.
new ApolloClient({
ssrMode: true,
cache: new InMemoryCache(),
link: WithApollo.BatchLink(),
credentials: 'same-origin',
});
我在文档中看到的最接近的事情是FetchOptions......但它没有指定我实际上可以传递哪些选项来实现我禁用或限制缓存的需要。
推荐指数
解决办法
查看次数
在析构时处理嵌套对象上缺少的属性
我需要解构嵌套对象。当某些嵌套属性丢失时，在分配确实存在的属性时避免异常的最佳方法是什么？
const data = {
title: 'hello',
// nest: {
// road: 5
// }
};
const { title, nest: { road = '' } } = data;
console.log(road);
/** i want it to return '' or undefined.
* actually it returns: Cannot match against 'undefined' or 'null'
*
*/
console.log(title)
/** i want it to return 'hello'
* actually: never got there as there was an exception.
*/
推荐指数
解决办法
查看次数
使用 vscode 调试器调试 next.js
我已经使用create-next-app安装了一个项目。我需要使用我的编辑器来调试服务器端渲染：vscode。所以我访问了vscode-recipes - how to debug next.js app。
我对配方做了一些小改动，这样我就不必Next全局安装了。
这是我的launch.json配置文件：
{
"type": "node",
"request": "launch",
"name": "Next: Node",
"runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
"runtimeArgs": ["-inspect"],
"port": 9229,
"console": "integratedTerminal"
}
当我运行它时，我收到以下错误：
Error: Use env variable NODE_OPTIONS instead: NODE_OPTIONS="--inspect" next dev
我正在尝试更改runtimeArgs为以下应该有效的命令：
"runtimeArgs": ["NODE_OPTIONS=--inspect"]并且出现其他错误：
No such directory exists as the project root: /Users/username/with-redux-thunk-app/NODE_OPTIONS=--inspect
我如何正确表达"NODE_OPTIONS=--inspect"以便它与 vscode 调试器一起使用？
推荐指数
解决办法
查看次数
如何避免在初始化期间提供虚拟Vue数据结构？
在我的Vue驱动的HTML中我有这条线
<span>Last updated on {{incident.LastUpdate[0].date}}</span>
data在Vue实例中定义为
data: {
incident: {}
}
在执行过程中,incident是异步加载但在初始页面加载期间我看到了
[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined"
(...)
TypeError: Cannot read property '0' of undefined
这是可以理解的,因为incident内容尚不可用.当它们可用时,页面会正确显示.因此,错误是预测和暂时的,所以我可以忘记它.
然而,我希望将其静音并incident使用一些虚拟数据进行初始化
data: {
incident: {
LastUpdate: [
{
date: null
}
]
},
},
错误现在消失了,但我觉得这是解决它的尴尬方式.如果有更多数据要初始化,它也会变得很麻烦.
我的问题:在Vue中处理这个问题的正确方法是什么？我修复中的虚拟数据？
推荐指数
解决办法
查看次数
EA 交易与 MQL4 指标之间的交互
是否可以通过专家顾问读取预建指标的变化（例如：其价值变化），当然 - 根据这些读取自动进行交易？
负责执行此操作的功能是什么？
我试图在谷歌上查找这个，但似乎我只能做跟踪对象创建或删除之类的事情......称为图表事件......也许我错过了什么？
推荐指数
解决办法
查看次数
在另一个vue组件中使用Vue JS组件方法
我有两个不同的vue组件文件,我应该怎么做才能在另一个Component.vue文件中使用Check-list.vue中的changeCollection()方法？
Check-lust.vue:
<template lang="html" ref="">
<div class="check-list-view">
<collections :current_collection="this.current_collection" ></collections>
</div>
</template>
<script>
export default {
data () {
return {
current_collection: 'All'
}
},
methods: {
changeCollection (collname) {
this.current_collection = collname
}
}
}
</script>
和Component.vue:
<template lang="html">
<div class="container " style="margin-bottom:32px">
<!-- NOT WORKS: -->
<button type="button" name="button" class="btn my-btn-orange" @click="changeCollection('All')">All</button>
</div>
</template>
<script>
export default {
props: ['current_collection']
}
</script>
推荐指数
解决办法
查看次数