我刚刚将 a 从基于类更新为功能组件。
当我查看 React 的 DevTools 时，我通常会看到我的组件以Gallery所有命名的状态变量命名。
但是现在，我所看到的只是一个以_default一堆非描述性State:定义命名的组件。
从其他答案中，我读到 React Dev Tools 现在支持钩子，但我没有看到任何组件名称错误的示例。
这是正常行为还是我做错了什么？
反应 16.9.0
React 开发者工具 Chrome 扩展： 4.1.1
在 Firefox 中也遇到同样的问题。
// The component
import React, { useState, useEffect } from 'react';
const Gallery = ({ images, layout }) => {
const [showLightbox, toggleLightbox] = useState(false);
const [activeImage, setActiveImage] = useState(false);
return (
// Some JSX here
)
};// Rendering the component
import React from 'react'; …我的应用程序请求使用位置服务的许可。
如果用户拒绝权限，他们可以单击按钮转到设置页面并授予权限。
在 iOS 上，他们可以选择直接返回应用程序。在Android上，我认为他们可以做类似的事情。
有没有办法检测回到应用程序，以便我可以再次检查他们的权限？
我尝试过 React Navigation 的useFocusEffect钩子：
useFocusEffect(
React.useCallback(() => {
console.log("navigated")
return () => getPosition()
}, [])
)
但不幸的是，这仅在应用程序中的屏幕/路线之间导航时有效。
有没有办法检测应用程序从后台转换到前台？
我有一个问题，涉及使用 Safari 时 CSS 过渡效果在最后跳跃。
将鼠标悬停在图像上时会发生动画。在 Chrome、Firefox、Opera 等上，动画一直很流畅。但是在 Safari 上，动画最后会稍微弹出/跳跃。这是非常微妙的，以便保持眼睛上的文字，看看它在这个网址在这里
我在网上找不到任何提到此问题的内容。我在下面提供了 CSS。有谁知道为什么会这样？
.img-box {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.img-box .overlay {
width: 100%;
height: 100%;
position: absolute;
background:rgba(0, 0, 0, 0.2);
opacity:0;
top: 0;
left: 0;
padding:10px;
transition-duration:1.5s;
transition-timing-function: cubic-bezier(.53,.32,.63,1);
-webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1);
}
.img-box .overlayDark {
width: 100%;
height: 100%;
position: absolute;
background:rgba(0, 0, 0, 0.3);
opacity:0;
top: 0;
left: 0;
padding:10px;
transition-duration:1.5s;
transition-timing-function: cubic-bezier(.53,.32,.63,1);
-webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1);
}
.img-box .overlay:hover …我正在尝试使用 stylelint 一次检查多个目录。
在我的package.json文件中我有：
"scripts": {
"lint": "stylelint 'pages/**/*.scss', 'global/components/**/*.scss' ; exit 0"
},如果我删除 或'pages/**/*.scss'，'global/components/**/*.scss'我可以检查其中一个目录。
是否可以同时 lint 2 个？
尝试设置 Jest 来测试我的 React 组件（从技术上讲，我正在使用 Preact）但同样的想法......
每当我尝试获取覆盖率报告时，当它遇到任何 jsx 语法时都会出错。
Running coverage on untested files...Failed to collect coverage from /index.js
ERROR: /index.js: Unexpected token (52:2)
50 |
51 | render(
> 52 | <Gallery images={images} />,
| ^
我试过遵循文档和类似的问题，但没有运气！似乎 Jest 没有使用我的 babel 设置。
知道如何摆脱错误吗？
Running coverage on untested files...Failed to collect coverage from /index.js
ERROR: /index.js: Unexpected token (52:2)
50 |
51 | render(
> 52 | <Gallery images={images} />,
| ^
{
"name": "tests",
"version": "1.0.0",
"description": …我有一个分支数组，看起来像这样：
let branches = [
{
id: 21,
name: "Branch 1",
opening_times: [ {}, {}, {} ] // Array of objects (Monday, Tuesday etc)
},
{
id: 22,
name "Branch 2"
opening_times: [ {}, {}, {} ] // Array of objects (Monday, Tuesday etc)
},
// .. etc
]
但我想将其变成一个对象，每个对象的名称均作为关键字。
branches = {
"Branch 1": {
id: 21,
opening_times: [ {}, {}, {} ] // Array of objects (Monday, Tuesday etc)
},
"Branch 2": {
id: 22,
opening_times: [ …我有一个HTML表单,可以选择上传文件.
然后,我希望将该文件作为电子邮件地址的附件以及其余表单数据发送.
我正在使用PHP Mailer,我收到要发送的表单数据:如姓名,电话号码等.
我无法将图像随之发送.我提供了迄今为止的代码
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form id='contactus' action='contact.php' enctype="multipart/form-data" method='post'>
<fieldset >
<legend>Contact us</legend>
<div class='container'>
<label for='email' >Name*:</label><br/>
<input type="text" id="name" name="name" required /><br>
<label for='email' >Phone*:</label><br/>
<input type="text" id="phone" name="phone" required /><br>
<label for='email' >Email*:</label><br/>
<input type='text' name='email' id='email' required/><br/>
<label for='message' >Message:</label><br/>
<textarea rows="10" cols="50" name='message' id='message'></textarea>
<br>
<!-- Name of input element determines name in $_FILES array -->
Send this file: <input id="file" name="image" type="file" />
<input type='submit' name='Submit' …reactjs ×2
arrays ×1
babeljs ×1
css ×1
ecmascript-6 ×1
glob ×1
html ×1
javascript ×1
jestjs ×1
jsx ×1
object ×1
package.json ×1
php ×1
phpmailer ×1
preact ×1
react-hooks ×1
react-native ×1
sass ×1
stylelint ×1