小编mcc*_*osa的帖子

一直试图研究这个，但似乎没有其他人有这个，或者认为这是一个问题。

我使用mini-css-extract-plugin（MiniCssExtractPlugin）在我的webpack.config.js。

但是，当我运行时webpack，控制台上散落着数百个与此类似的实例...

Child mini-css-extract-plugin ../../../node_modules/css-loader/index.js??ref--6-1!../../../node_modules/postcss-loader/src/index.js!../../../node_modules/sass-loader/lib/loader.js!ui/radiolist-toggler/RadioListToggler.scss:
    Entrypoint mini-css-extract-plugin = *
    [../../../node_modules/css-loader/index.js?!../../../node_modules/postcss-loader/src/index.js!../../../node_modules/sass-loader/lib/loader.js!./ui/radiolist-toggler/RadioListToggler.scss] /Users/~~~/git/user-section/node_modules/css-loader??ref--6-1!/Users/~~~/git/user-section/node_modules/postcss-loader/src!/Users/~~/git/user-section/node_modules/sass-loader/lib/loader.js!./ui/radiolist-toggler/RadioListToggler.scss 5.33 KiB {mini-css-extract-plugin} [built]
        + 1 hidden module

我需要向上滚动几秒钟才能看到我的所有资产等。

我对 webpack 很陌生，所以不确定如何防止它输出到控制台？

下面是我的 webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const modernizr = require("modernizr");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');


module.exports = {
  context: path.resolve(__dirname, 'src/main/client'), …

所以，我知道这个问题已经被问了 100 次，但在我的例子中似乎没有一个解决方案有效。

我正在使用useState钩子将状态更新为initialValues获取从getInitialValues函数返回的数据的值

const [initialValues, setInitialValues] = useState(getInitialValues());

该getInitialValues函数执行逻辑检查并返回一个对象或另一个函数retrieveDetails()

const getInitialValues = () => {
   let details;
   if(!addressDetails) {
      details = retrieveDetails();
   } else {
      details = { 
         ...,
         ...,
         ...
      };
   }
   return details;
}

该函数retrieveDetails是一个进行 API 调用的异步函数，我等待响应并返回从响应中收到的对象。

const retrieveDetails = async () => {
   const addr = addressDetails[currentAddress];
   const { addressLookup } = addr;
   const key = process.env.API_KEY;
   const query = `?Key=${key}&Id=${addressLookup}`;
   const addrDetails = await …

我有一个用于错误消息元素的 React 组件ErrorMessage，它要么返回带有子元素的 div 元素，要么返回null，以便将其从 DOM 中删除。

我很好奇是否有一种方法可以使用 CSS/React 来为这个元素从 DOM 中删除时设置动画？当它渲染良好时我可以制作动画。

这里有一个CodeSandBox来测试它。

这是我的SASS

.ErrorMessages {
  background: #ee4900;
  color: #fff;
  border: 0;
  color: #fff;
  padding: 0.8em 1em;
  text-align: left;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: fadeInUp;
}

.ErrorMessages--Centered {
  padding-top: 30px;
  padding-right: 70px;
  padding-left: 70px;
}

.ErrorMessages--fadeOut {
  animation-name: fadeOutDown;
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    max-height: 72px;
  }

  to {
    opacity: 0;
    padding: 0;
    margin: 0; …

我正在 Strapi 上使用 WYSIWYG 富文本插件。添加媒体 url 返回以下字符串，然后我dangerouslySetInnerHTML在 React 中使用该字符串将其转换为 HTML。

<figure class="media">
   <oembed url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"></oembed>
</figure>

但这不会在浏览器中呈现 YouTube 视频。

我不确定如何让它渲染。查看 oEmbed，大多数情况下它似乎会转换为 iframe，但不确定当它从 HTTP 请求响应作为字符串返回时如何执行此操作。

我有以下C#

protected void add_button_Click(object sender, EventArgs e)
{
    string teamname = team_name_tb.Text;
    string teamstatus = "Not Started";
    string teamnotes = team_notes_tb.Text;
    string sprintid = sprint_select.SelectedValue;

    string ConnectionString = WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
    SqlConnection myConnection = new SqlConnection(ConnectionString);

    myConnection.Open();

            String query = "INSERT INTO teams (team_name, status, notes) 
                            VALUES (@team_name, @status, @notes); 
                            INSERT INTO sprints_vs_teams (sprint_id, team_id)                    
                            VALUES (@sprint_id, @team_id)";

            SqlCommand myCommand = new SqlCommand(query, myConnection);
            myCommand.Parameters.AddWithValue("@team_name", teamname);
            myCommand.Parameters.AddWithValue("@status", teamstatus);
            myCommand.Parameters.AddWithValue("@notes", teamnotes);
            myCommand.Parameters.AddWithValue("@sprint_id", sprintid);
            myCommand.Parameters.AddWithValue("@team_id", ????);

            myCommand.ExecuteNonQuery();
            myConnection.Close();
}

在teams表中主键是team_id我希望能够拉出它的值并将其插入到 …

我在路线中有一个表单，如果存在任何验证错误，则不应允许用户导航到另一条路线。如果没有验证错误，则允许导航到另一条路线。

下面是我当前的代码，该onBlock函数不起作用，因为要提交然后验证表单的函数是异步的，因此该函数不起作用。

表单组件.js

import React, { useState, useEffect, useRef } from "react";
import { FieldArray } from "formik";
import { useHistory } from "react-router-dom";
import * as Yup from "yup";
import Form from "./Form";
import TextInput from "./TextInput";

const FormComponent = () => {
  const history = useHistory();
  const [initialValues, setInitialValues] = useState();
  const [isSubmitted, setIsSubmitted] = useState(false);
  const block = useRef();

  const formRef = useRef(null);

  const onFormSubmit = async (values) => {
    setIsSubmitted(true);
  };

  const validationSchema = …

我的 monorepo 中有以下文件结构

monorepo\n \xe2\x94\xa3 node_modules\n \xe2\x94\xa3 packages\n \xe2\x94\x83 \xe2\x94\xa3 package-1\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 jest.config.js\n \xe2\x94\x83 \xe2\x94\xa3 package-2\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 jest.config.js\n \xe2\x94\x83 \xe2\x94\xa3 package-3\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 jest.config.js\n \xe2\x94\xa3 package.json\n \xe2\x94\x97 jest.base.config.js\n

在 monorepo 根目录中，我有一个文件jest.base.config.js，其中包含

module.exports = {\n  coverageThreshold: {\n    global: {\n      branches: 80,\n      functions: 80,\n      lines: 80,\n      statements: 80,\n    },\n  },\n  moduleFileExtensions: [\'ts\', \'tsx\', \'js\', \'jsx\', \'json\', \'node\'],\n  transformIgnorePatterns: [\n    \'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@fortawesome/react-native-fontawesome|d3-.*|internmap)/)\',\n  ],\n};\n

然后在每个包中jest.config.js我导入jest.base.config并使用任何覆盖导出它，就像这样

const baseConfig = require(\'../../jest.base.config\');\n\nmodule.exports …

我使用带有前向引用的 formik 形式

表单.js

import React from "react";
import FormikWithRef from "./FormikWithRef";

const Form = ({
  formRef,
  children,
  initialValues,
  validationSchema,
  onSubmit
}) => {
  return (
    <FormikWithRef
      validateOnChange={true}
      validateOnBlur={true}
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
      ref={formRef}
    >
      {(props) => <form onSubmit={props.handleSubmit}>{children}</form>}
    </FormikWithRef>
  );
};

export default Form;

FormikWithRef.js

import React, { forwardRef, useImperativeHandle } from "react";
import { Formik } from "formik";

function FormikWithRef(props, ref) {
  let _formikProps = {};

  useImperativeHandle(ref, () => _formikProps);

  return (
    <Formik {...props}>
      {(formikProps) => {
        _formikProps = …

我不是 100% 确定如何表达这个问题，所以请随意将问题标题更改为有意义的内容。

我有一个对象solution，其中包含一个days包含 10 个数组的属性名称，请参见下面的示例

{
    "sameShiftHolds": true,
    "sameStaffHolds": true,
    "sameRoomHolds": true,
    "days": [{
        "availableStaff": [
            [0, 1, 4, 3, 5, 9, 22, 44],
            [0, 1, 4, 3, 5, 9, 22, 44],
            [4, 8, 7]
        ],
        "availableRooms": [
            [3, 6, 77, 89, 23],
            [3, 6, 77, 89, 23],
            [2, 7, 9]
        ],
        "suitableStaff": [
            [22, 44],
            [22, 44],
            [4]
        ],
        "suitableRooms": [
            [89, 23],
            [22, 44],
            [2]
        ],
        "ValidStartDate": true
    }, {
        "availableStaff": [
            [0, …

因此，我遵循了有关如何使用 Windows CMD 为 github 设置 SSH 的教程，一切都工作正常，直到我使用以下命令克隆存储库

git clone git@github.com:{myusername}/{myrepo}.git

我从哪里得到

git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

即使当我运行时ssh -T git@github.com，我也会收到预期的消息，告诉我我已通过身份验证。

绞尽脑汁后，我决定在 git bash 上尝试一下。

我注意到的第一件事是跑步

 ssh-add -l

在 git bash 中，我得到了The agent has no identities.，但是当我在 Windows CMD 上运行相同的命令时，我得到了所有 SSH 密钥？

因此，在 git bash 中添加 ssh 密钥后，我能够克隆我的存储库。

那么，为什么我只能在 git bash 上执行此操作，而不能在 cmd 或 powershell 上执行此操作？这是否与他们使用不同的 ssh …

在基于类的react组件中，您可以轻松完成；

componentWillUnmount() {
  window.removeEventListener('resize', this.resizeHandler);
}

虽然我不确定如何在带有React Hooks的基于函数的组件中执行此操作？

在我的应用程序中，我在Component上单击按钮后执行以下功能LoginCard。

const handleLogin = (email, password) => {
  loginService.login(email, password)
    .then((response) => {
      if (!response.error) {
        props.history.push("/");
      }
    });
}

我包的出口LoginCard的withRouter函数从react-router-dom重定向到的路由地址。

export default withRouter(LoginCard);

在LoginCard组件内部，我有一个Tabs组件，该组件在useEffect挂钩中具有事件侦听器。

useEffect(() => {
      setUnderLineStyle(getUnderlineStyle());
      window.addEventListener("resize", _.throttle(() => { 
         setUnderLineStyle(getUnderlineStyle())}, 
         300), 
         {passive:true});
   }, [props]);

但是，当我单击该按钮LoginCard并重定向到/该窗口，然后调整窗口大小时，将调用resize事件列表器中的函数setUnderLineStyle(getUnderlineStyle())。

我曾尝试在其中添加以下内容，useEffect但setUnderLineStyle(getUnderlineStyle())仍会在调整大小时被调用。

return () => window.removeEventListener("resize", _.throttle(() => { 
                setUnderLineStyle(getUnderlineStyle())}, …

我已经创建了一个 React 库rollup，但是，我有大量的组件被导出，因此文件大小相对较大。

所以在我导入库的项目中执行以下操作；

import { ComponentExampleOne, ComponentExampleTwo } from 'my-react-library';

它导入通过汇总输出的整个索引文件（包括所有其他组件和任何 3rd 方依赖项），因此当用户第一次点击上面导入的页面时，他们需要下载整个文件，这比我想要的要大得多它是。

对于lodash我只想访问单个函数而不是整个库的情况，我会执行以下操作；

import isEmpty from 'lodash/isEmpty';

我想通过 rollup 实现类似的功能，这样我就可以做类似的事情

import { ComponentExampleOne } from 'my-react-library/examples';
import { ButtonRed } from 'my-react-library/buttons';

所以我只导入index.js文件中导出的内容examples和buttons文件夹，这是我在库中的文件夹结构。

my-react-library/
-src/
--index.js
--examples/
---ComponentExampleOne.js
---ComponentExampleTwo.js
---ComponentExampleThree.js
---index.js
--buttons/
---ButtonRed.js
---ButtonGreen.js
---ButtonBlue.js
---index.js

我不知道通过汇总来实现这一目标？

这是我的当前 rollup.config.js

import babel from 'rollup-plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import postcss from …

我有一个要映射的数组，在我正在调用的映射函数内部调用一个异步函数，该函数执行异步请求，使用request-promise.

我期望映射数组的第一项，执行请求，然后第二项重复相同的过程。但在这种情况下，情况并非如此。

这是我的职责；

const fn = async() => {
  const array = [0, 1, 2];
  console.log('begin');
  await Promise.all(array.map(item => anAsyncFunction(item)));
  console.log('finished');
  return;
}

anAsyncFunction 如下；

const anAsyncFunction = async item => {
  console.log(`looping ${item}`);
  const awaitingRequest = await functionWithPromise(item);
  console.log(`finished looping ${item}`);
  return awaitingRequest;
}

以及functionWithPromise提出请求的地方

const functionWithPromise = async (item) => {
  console.log(`performing request for ${item}`);
  return Promise.resolve(await request(`https://www.google.com/`).then(() => {
    console.log(`finished performing request for ${item}`);
    return item;
  }));
}

从我得到的控制台日志中；

begin
looping 0
performing …