标签: frontend

我试图模拟一个keyDown事件,专门用于输入,keyCode: 13.我已经尝试了许多不同的方法来做到这一点,但它们都没有奏效.我也看过网上,似乎这个功能要么是错误的,要么在当前版本的Enzyme中不起作用.有没有人知道这个功能是否有效,如果有的话,模拟输入或其他类型的关键事件的正确语法是什么？谢谢!

这就是我目前所拥有的,它不起作用:

const input = wrapper.find('input');
input.simulate('keyDown', {keyCode: 13});

我目前的酶版本是2.4.1

我在reactjs中从framer-motion模块进行命名导入时遇到此错误。Obs：我没有使用 webpack。

import { Fragment } from "react";

import classes from "./Hero.module.css";

import { motion } from "framer-motion";

import Header from "../header/Header";

export default function Hero() {
  return (
    <Fragment>
      <Header />
      <section className={classes.banner}>
        <img src="https://i.imgur.com/1arVXy2.jpg" />
        <motion.h1 className={classes.slogan}>Produtos de alta performance</motion.h1>
        <div className={classes['see-more']}>
          <span>Veja mais</span>
        </div>
      </section>
    </Fragment>
  );
}

这是我的html输入元素

<input type="text" name="pname[]" value="" />
<input type="text" name="pname[]" value="" />
<input type="text" name="pname[]" value="" />
<input type="text" name="pname[]" value="" />
<input type="text" name="pname[]" value="" />
<input type="text" name="pname[]" value="" />

如何pname使用Jquery 获取数组的所有值

我的 NuxtJS 应用程序需要帮助。

最近，在我离开应用程序一段时间（2 个月）而没有更新后，应用程序中出现了 ESLint 冲突。因此，在我开始研究它之后，尝试解决 ESLint 问题提出了挑战。然后我必须将项目迁移到较新版本的 Node 和 ESLint。

这样做之后，我解决了冲突问题，我的项目可以安装我的依赖项，但现在服务器无法启动。节点现在抛出一个错误，我什至不知道如何修复。我不知道许多其他人在升级 Node.js 版本后是否面临这个问题，但它抛出了有关不支持的哈希函数的错误。

这是阻止我的服务器启动的终端错误的屏幕截图：

我已经解决了迁移带来的所有 ESLint 和语法错误，所以我不知道还能做什么。

下面是我的 nuxt.config.js 文件的片段：

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'heritage-fd',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    
    script: [
      {
        src: '~/static/css/bootstrap.min.js',
      },
    ], …

聘请前端开发人员时,您应该测试哪些具体技能和实践？什么是评估他们的HTML,CSS和Javascript技能的好指标？

显然,无表格语义HTML和纯CSS布局可能是关键技能.但具体技术呢？他/她是否应该毫不费力地模拟多列布局？CSS sprites？等高(或人造)柱？HTML标签选择是否重要(即过分依赖<div>)？他们应该能够解释(用语言)浮标是如何工作的吗？

那javascript技能怎么样？框架体验(jQuery,Prototype等)有多重要.今天？

显然,他们将要处理的职位和网站的详细信息是所需技能的最佳指示.但我想知道在为候选人创建测试时,人们可能会考虑哪些特定技能成为交易破坏者(或制造者).

我正在使用Python 2.6中的GUI前端,通常它非常简单:您使用subprocess.call()或subprocess.Popen()发出命令并等待它完成或对错误做出反应.如果您的程序停止并等待用户交互,您会怎么做？例如,程序可能会停止并询问用户是否有ID和密码或如何处理错误？

c:\> parrot
Military Macaw - OK
Sun Conure - OK
African Grey - OK
Norwegian Blue - Customer complaint!
(r) he's Resting, (h) [Hit cage] he moved, (p) he's Pining for the fjords

到目前为止,我所阅读的所有内容都告诉您如何在程序完成后才读取程序的所有输出,而不是在程序运行时如何处理输出.我无法安装新模块(这是一个LiveCD),我将不止一次处理用户输入.

我正在使用Webpack来编译我的脚本和HTML(使用html-webpack-plugin).问题是,我有5个包含相同部分的HTML文件,我想将这些部分移动到单独的.html文件中,然后将这些部分移动到include每个HTML文件中.这样,如果我将更改这些较小的HTML文件,它将重新编译每个HTML文件以表示这些更改.

默认情况下,Webpack为.js文件执行此操作,但是我可以对HTML文件使用类似的东西吗？

我有一个使用两个第三方服务的React应用程序.该应用程序已开始使用react-create-app.

这两项服务都需要API密钥.

一个密钥通过脚本标记提供,如下所示:

<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>

另一个API密钥用于请求中.我将实际的密钥存储在一个常量中,并使用它来形成请求.像这样:

const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`

谷歌处理API密钥的最佳做法提示:

不要直接在代码中嵌入API密钥

这让我想到了第一个问题:

1.如何使用变量index.html？

在我的index.html文件中,我有两个看起来像这样的标签:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

显然,%PUBLIC_URL%是一个变量.如何添加变量%MY_KEY%以避免直接在我的代码中嵌入API密钥？

得到这样的东西:

<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>

与此问题相关,将API密钥存储在常量中是否安全,就像我一样MY_OTHER_KEY？

谷歌还说:

不要将API密钥存储在应用程序源代码树中的文件中

这让我想到了第二个问题:

2. API密钥是否仍然在捆绑中？

说我做谷歌和我说的话

...将它们存储在环境变量或应用程序源树之外的文件中

假设我将密钥存储在外部文件中.我认为,该文件将在某个时刻被读取,并且它的内容要么在包中复制,要么以其他方式引用.最后,密钥是否仍然可以在捆绑中看到,除非可能更难找到？这对此有何帮助？

3.在react应用程序中是否有使用API​​密钥的canonic方法？或者由个人开发人员决定？

自我解释,我正在寻找解决这个问题的反应方式,如果有的话.

谢谢您的帮助!

我有一个道具从父组件传递到子组件，该组件根据用户的输入而变化。

当子组件渲染之前该 prop 发生变化时，我想在子组件中触发数据获取。我该怎么做？

我通过使用尝试了以下方式useEffects(()=>{},[props.a, props.b])，但总是在渲染后调用。请帮忙！

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function parentComponent() {
  const [inputs, setInputs] = useState({ a: "", b: "" });
  return (
    <>
      <input
        value={inputs.a}
        onChange={(event) => {
          const value = event.target.value;
          setInputs((prevState) => {
            return { ...prevState, a: value };
          });
        }}
      />
      <input
        value={inputs.b}
        onChange={(event) => {
          const value = event.target.value;
          setInputs((prevState) => {
            return { ...prevState, b: value };
          });
        }}
      />
      <ChildComponent a={inputs.a} …

因此,我们最近在公司中选择了React作为构建我们庞大的业务Web应用程序的前端技术.最近说,我的意思是我们之前没有React的经验(我们有很多AngularJS的背景),并且通过说大量应用程序,我的意思是它非常庞大且非常动态,有很多不同的部件和功能.

因为我们将拥有许多巨大的组件,它们都起着非常重要的作用,并且在它们内部具有复杂的逻辑,并且因为我们希望它们易于插拔和重复使用,所以我们希望它们尽可能地与外部世界隔离.我们应用程序的一部分,因为否则由于它们的大小和复杂的功能,开发和维护它们几乎是不可能的.这就是我们决定不使用Redux的原因,至少在开始时,我们只是自己开发单独的组件,因为它会破坏组件隔离并使得当有如此多的复杂时,整个应用程序数据流逻辑无法理解组件.虽然我认为我们的选择可能是错误的,因为正如我已经提到的,我们没有React的经验.

正如我已经提到的,该应用程序非常动态.我的意思是组件实际上是由数据呈现的.我们使用与我们的API端点交互的各种配置提供程序类来获取应用程序配置的各个部分,例如导航,页面,各种表单,列表等的配置,然后尝试呈现从该配置中读取的组件.

问题是,经过几周努力获得React的动力并发现正确的模式和我们问题的常见解决方案,我们一直在谈论我们的工作人员,也许React对我们来说不是正确的技术,因为它是一个UI库,而不是一个框架事件,它对我们没什么帮助,但只是添加了我们必须打破的渲染规则,以实现我们想要的动态和组件独立性.

考虑到组件隔离和数据流管理,我个人听说有一种语言用于前端开发Elm,它具有非常强大的数据流架构,其中每个组件都有自己独立的模型,但我不知道是否值得一试,因为它很快就会落后于我们的大需求.

我在这里写这个问题的原因是我希望能够从那些拥有大量前端应用程序背景的人那里获得洞察力.我想知道是否可以使用React开发这样的应用程序,无论React是否适合这种复杂性和动态,我们是否真的需要Redux或其他东西,我们应该遵循什么样的路径,实践和意识形态.如果你正确地理解了我的问题,那么我们正在努力解决的架构方面比技术方面更多.也许我们正在走的路上走向越来越多的斗争和复杂性,而不是走向生产.