小编Dog*_*Dog的帖子
片段在React 16.2中给出了意外的令牌错误
我有以下组件呈现一系列组件.但是,我下载了React 16.2并尝试使用片段而不是div,但是我收到以下错误:
Error in ./src/containers/answers.js
Syntax error: Unexpected token (24:5)
22 |
23 | return (
> 24 | <>
| ^
25 | {AnswersCard}
26 | </>
27 | )
当片段应该能够替换React 16.2中的div时,为什么会出现此错误？
question ?
AnswersCard = ( question.answers.sort(function(a,b) { return (a.count < b.count) ? 1 : ((b.count > a.count) ? -1 : 0)}
).map(answer =>
<Answer key={answer.id} answer={answer} questionId={question.id} />
)) : AnswersCard = ( <p>Loading...</p> )
return (
<>
{AnswersCard}
</>
)
}
}
推荐指数
解决办法
查看次数
文本未包装在CSS网格中
我一直在尝试使用CSS Grid,并坚持找到最有效的方法,让文本环绕一个<div>元素,该元素部分位于另外两个<div/>元素之上.基本上,就像在下面的图像中,我希望红色和蓝色div中的文本环绕黄色div,该黄色div部分位于其他两个元素的列和行中.显然,这是一个基于网格的布局,所以我对使用典型的浮点数做这件事并不感兴趣.如何使用CSS Grid实现此效果？
这是我的CSS和HTML:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
}
.red {
background-color: red;
grid-column: 1 / span 2;
grid-row: 1 / span 4;
}
.blue {
background-color: blue;
grid-column: 3 / span 2;
grid-row: 1 / span 4;
}
.yellow {
background-color: yellow;
grid-column: 2 / span 2;
grid-row: 2 / 4;
}<div class="grid">
<div class="red">According to the Oxford English Dictionary, hello is …推荐指数
解决办法
查看次数
在 Spring Boot Gradle 项目中导入 JWT（JSON Web Token）有困难
我有一个 Spring Boot gradle 项目，在 build.gradle 依赖项中，我将 JSON Web Token 导入为：
compile group: 'io.jsonwebtoken', name: 'jjwt', version: '0.2'
根据 Spring Security 和视频教程，我构建了一个成功的身份验证方法。但是，当我在这种方法中使用 Jwts 时，它不会提示我导入与视频教程中相同的文件，并且实际上没有任何导入选项的提示。具体来说，在视频中（其中使用了Maven），添加了import的提示：
import io.jsonwebtoken
然而，在我的应用程序中，我从未获得过此选项并手动导入或导入 io.jsonwebtoken.*; 不起作用。正如班级指出的那样：
import io cannot be resolved
同样，SignatureAlgorithm 方法不包含来自 JWT 的导入。
如何将 JSON Web 令牌成功导入到我的 gradle 项目中（或至少导入 io）。视频教程中的方法如下。Jwts 是网络令牌的实现，它是我遇到困难的包。
@Override
protected void successfulAuthentication(HttpServletRequest req,
HttpServletResponse res,
FilterChain chain,
Authentication auth) throws IOException, ServletException {
String userName = ((User) auth.getPrincipal()).getUsername();
String token = Jwts.builder()
.setSubject(userName)
.setExpiration(new Date(System.currentTimeMillis() + SecurityConstants.EXPIRATION_TIME))
.signWith(SignatureAlgorithm.HS512, SecurityConstants.TOKEN_SECRET)
.compact();
res.addHeader(SecurityConstants.HEADER_STRING, SecurityConstants.TOKEN_PREFIX …推荐指数
解决办法
查看次数
在 Parcel 构建期间在 HTML 文件中调用时不会触发 JavaScript 函数
我有一个链接到 JavaScript 文件的基本 HTML 表单页面。这两个文件都存在于 Node 项目中，我将 Parcel 用作打包器（因为我最终想将其转换为 TypeScript）。
当我在浏览器中运行 html 文件时，会触发 JavaScript 函数，但是当我运行 Parcel 构建时，会编译 index.html，但不会触发 JavaScript 函数。它识别 js 文件，因为我可以在函数外调用 dom 查询。
当我在控制台中检查时，出现错误：
(index):12 Uncaught ReferenceError: validationFunction is not defined
at HTMLInputElement.onchange
但这没有意义，因为该函数是在 Parcel 构建之外定义的。
使用Parcel 编译时如何让index.html 页面识别JavaScript 函数？
index.js 文件如下：
function validationFunction(event) {
event.preventDefault();
var div;
div = document.getElementById("appendedText");
div.innerHTML += "hello world";
}
index.html 是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<form …推荐指数
解决办法
查看次数
React-Stripe-Elements 元素未按预期呈现样式
我正在尝试设置 React-Stripe-Elements，虽然我能够获得要渲染的基本表单，但它以一种非常时髦的方式进行。我什至尝试从我在网上找到的表单中添加 CSS，但它无法在 CardElement 中正确呈现。我怎样才能让 React-Stripe-Elements 使用正确的 UI 或 UI 呈现，甚至远程类似于文档上的 UI？
CardElement 当前渲染如下：
我的卡片元素文件如下所示：
import React from 'react';
import {CardElement} from 'react-stripe-elements';
class CardSection extends React.Component {
render() {
return (
<label>
Card details
<CardElement style= {{ base: { color: '#fff',
fontWeight: 500,
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
fontSize: '15px',
fontSmoothing: 'antialiased' }}} />
</label>
);
}
};
export default CardSection;
推荐指数
解决办法
查看次数
尝试在 Java 中的数组上使用 .stream() 时出现“找不到符号错误”
我正在尝试实现 Java.stream() 方法，以在 Java 8 中将多个数字列表组合在一起。我已经导入了 java.util.stream*; 包裹。静态方法设置为返回一个 int 并接受一个数组。但是，当我在数组上调用 .stream().reduce() 时，出现错误：
error: cannot find symbol
int count = x.stream().reduce(1, (a, b) -> a * b).sum();
^
symbol: method stream()
location: variable x of type int[]
如何正确使用stream()方法按顺序将数组的值乘在一起？
我定义的类为：
import java.util.stream.*;
public class Kata{
public static int grow(int[] x){
int count = x.stream().reduce(1, (a, b) -> a * b).sum();
return count;
}
}
推荐指数
解决办法
查看次数
设计注册路由文件结束时出现错误
我在互联网上搜索了这个错误的答案,但似乎没有任何东西直接或有效地解决它.
我在Rails应用程序中使用Devise,每当我转到users/sign_up页面并提交数据时,它都无法正确提交,Rails会给我错误:
"达到/文件末尾的EOFError"
Rails还包括此跟踪:
rbuf_fill/Users/john/.rvm/rubies/ruby-2.2.3/lib/ruby/2.2.0/net/protocol.rb
BUFSIZE = 1024 * 16
def rbuf_fill
begin
@rbuf << @io.read_nonblock(BUFSIZE)
rescue IO::WaitReadable
if IO.select([@io], nil, nil, @read_timeout)
retry
else
raise Net::ReadTimeout
我没跟哪个运气.
从其他帖子,我相信邮件设置可能有问题,但我已经尝试了所有推荐的解决方案,但我仍然遇到此错误.目前,我在config/initializers/devise.rb文件中设置了config.mailer_sender = SUPPORT_EMAIL.
我非常感谢任何人的建议,因为我花了很多时间没有运气.
推荐指数
解决办法
查看次数
React-Image-Gallery 导致错误行为
react-image-gallery我一直在尝试从这个 npm 包中实现。
虽然我可以获得一些滑动图像来工作，但每当我快速单击下一个箭头按钮时，它就会以类似越野车的行为弹出到屏幕顶部：
我尝试减少 CSS 文件中的过渡时间，但还是发生了同样的问题。我做错了什么以及如何让这个轮播像示例中那样实现一致的平滑过渡？
我安装了该软件包，然后按照建议将其包含在内：
import ImageGallery from 'react-image-gallery';
import React from 'react'
import '../node_modules/react-image-gallery/styles/css/image-gallery.css';
class App extends React.Component {
render() {
const images = [
{
original: 'http://lorempixel.com/1000/600/nature/1/',
thumbnail: 'http://lorempixel.com/250/150/nature/1/',
},
{
original: 'http://lorempixel.com/1000/600/nature/2/',
thumbnail: 'http://lorempixel.com/250/150/nature/2/'
},
{
original: 'http://lorempixel.com/1000/600/nature/3/',
thumbnail: 'http://lorempixel.com/250/150/nature/3/'
}
]
return (
<ImageGallery items={images} />
);
}
}
export default App;
推荐指数
解决办法
查看次数
React Native Debugger不会关闭
我在Mac上使用React Native Debugger.但是,在我按下Cmd + D并进入Stop Remote JS Debugging然后点击重新加载后,每次尝试刷新时,应用程序都不会退出chrome中的调试屏幕弹出.
我试过关闭模拟器并杀死所有的端口/ pids.我也试过退出Chrome,但没有任何作用.
你如何关闭React Native中的远程调试？
推荐指数
解决办法
查看次数
反应路由器渲染道具路线总是重新渲染组件
我正在使用 React Router，因为需要将一个需要组件的函数传递到路由中，所以我正在使用渲染道具渲染组件。但是，将路由作为渲染道具传递总是会导致组件重新渲染。我已经尝试了所有可能的生命周期钩子，比如 shouldComponentUpdate 和 ComponentDidUpdate，但没有什么能阻止组件重新渲染。该路由结构如下图所示：
路线1：
<Route
path='/dashboard'
render={() => dashboardOperator(<Dashboard />)}
/>
相反，如果我只是以传统方式传递组件，它不会触发自动重新渲染。
路线2：
<Route
path="/dashboard"
component={DashboardComponent}
/>
但是，这种路由方式并不有效，因为它不允许将函数传递到路由中。
由于生命周期钩子似乎不能有效阻止 Route1（渲染道具方法）重新渲染组件，我如何使用渲染道具（或其他方法）并防止不必要的组件重新渲染？
推荐指数
解决办法
查看次数