标签: reactjs

我不确定问题是什么，因为我已经做了很多次了，没有任何问题，所以我想我搞砸了。我将展示 Product.js 组件和模块文件，如果还缺少其他内容，请告诉我（例如，也没有 next.config.js 文件）。

提前致谢！

产品.js

import { Card } from '@material-ui/core'
import styles from '../styles/Products.module.scss'

export default function Product({ product }) {
  console.log(product)
  return(
    <Card className="product">
      <img src={product.main_image} />
      {product.name && product.name}
    </Card>
  )
}

产品.module.scss 文件

.product {
  max-width: 300px;

  & img {
    width: 100%;
  }
}

material-ui我在底层使用 Typescript 创建了一个组件库。我使用了 Typescript 模块增强来向主题添加新选项，如Typescript 文档的主题定制中所述。

// createPalette.d.ts/* eslint-disable @typescript-eslint/no-unused-vars */
import { Palette, PaletteOptions } from "@material-ui/core/styles/createPalette";
declare module "@material-ui/core/styles/createPalette" {
    interface Palette {
        highlight: PaletteColor;
        layout: LayoutPaletteColor;
    }
    interface PaletteOptions {
        highlight: PaletteColorOptions;
        layout?: LayoutPaletteColor;
    }
    interface LayoutPaletteColorOptions {
        paper: string;
        text: string;
    }

    interface SidebarPaletteColorOptions extends LayoutPaletteColorOptions {
        navItemSelectedBg: string;
        navItemSelectedColor: string;
    }
    interface LayoutPaletteColor {
        header: LayoutPaletteColorOptions;
        sidebar: SidebarPaletteColorOptions;
        footer: LayoutPaletteColorOptions;
    }
}

然后，我构建我的项目并将其发布到 Github 包。我还使用这个脚本将*.d.ts文件复制到dist文件夹

"copy-typings": "copyfiles -u …

我已经使用设置了一个新项目npx create-react-app my-app --template typescript，并且没有更改任何配置设置。

如果我输入一些存在 TS 错误的代码，我的 IDE（VS Code）将显示该错误。但是，当我运行 start/build 时，我没有收到任何编译错误。

除此之外，npm run build在我们的 GitLab CI/CD 管道上运行时，确实会失败并出现错误。

我检查了我的 TS 版本，无论是在项目中还是我的全局模块所在的位置，都是相同的版本（4.1.3）。

正如我所说，我没有对 create React app 生成的内容进行任何更改，并且我尝试创建一个新项目并获得相同的结果。有人有什么想法吗？

编辑 - 要添加到这一点，如果我tsc在根目录运行，我会收到编译错误，但npm start我不会。

编辑 2 - 这是我在 package.json 中的脚本（与 CRA 提供给我们的内容相同）

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

我正在使用 Netlify CMS。我想将轮播的所有幻灯片导入到我的组件中。我制作了一个名为“滑块”的集合，并添加了一些幻灯片。这创建了两个 markdown 文件（每张幻灯片一个）public/content/slider/。我想将它们全部导入到一个可迭代对象中，以便我可以构建轮播。

因为我为 markdown 文件设置了 webpack 加载器，所以我可以毫无问题地导入单个 markdown 文件，如下所示：

import post from '../public/content/posts/[post name].md

但是当我尝试使用require.context、require-context或 import 时fs，效果并不好。所以我决定尝试从getStaticProps. 但__dirname在getStaticPropsis中/，我的计算机文件系统的根目录。

所有getStaticProps示例都使用数据获取。我缺少一些信息。如何导入/slides/文件夹中的所有markdown文件？

我跑了npm install prop-types --save-dev 并开始收到此错误

'prop-types' should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependencies

后来我通过运行卸载了依赖项npm uninstall prop-types --save-dev并通过运行再次安装npm install prop-types --save

错误仍然没有消失

'prop-types' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies

我已在 Heroku 上托管了 MERN 应用程序，但每当我在 app.js 文件中实现头盔时，都会导致此问题。

const path = require('path');
const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
// const cors = require('cors');
const rateLimit = require('express-rate-limit');
const helmet = require('helmet');
const mongoSanitize = require('express-mongo-sanitize');
const expressSanitizer = require('express-sanitizer');
const xss = require('xss-clean');
const hpp = require('hpp');
const compression = require('compression')

const authRouter = require('./routes/authRoutes');

const app = express();
// IMPLEMENT CORS
// app.use(cors());
// app.options('*', cors());
app.use((req, res, next) => {
   res.header('Access-Control-Allow-Origin', '*');
   res.header( …

提供一些背景知识：

我正在尝试构建一个登录表单页面函数来检测用户是否已经登录。如果他们已登录，则会出现一个按钮，提示用户注销。就像这样： {user ? userLoggedInAlert() : SignIn()}如果user为 True，则出现该按钮，如果user为 false，则他们会收到用于登录身份验证的用户名和密码表单。

我已经确定了所有功能。\n但是，当我按下按钮注销用户时，我收到此错误：

\xc3\x97\nError: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same …

我有一个简单的函数，它在参数中接受一个对象。为了仅接收有效数据，我需要输入对象的键，如下所示：

type DataType = "about" | "favorites" | "username";
type UpdatedData = { [key in DataType]: any };

function onSave (updatedData: UpdatedData){
//do stuff
}

// in a component
const onClickSave = () => onSave({ "about": text });

打字稿抛出以下错误：

'{ about: text; 类型的参数 }' 不可分配给“UpdatedData”类型的参数。输入 '{ 关于：文本；}' 缺少类型“UpdatedData”中的以下属性：收藏夹、用户名

如何解决这个问题？当然，我可以写[key: string]，[key in DataType]但打字就没用了。

我一直在尝试使用react-syntax-highlighter 在渲染的文本编辑器上在我的网站上生成一段代码。我花了一段时间使用这个插件并且喜欢它，但是我遇到了一个我找不到答案的问题。我想更改生成代码的一些颜色，但除了使用默认选择的主题之外，找不到任何其他方法来执行此操作。它们允许您将样式应用于背景和代码，但不能将样式应用于保存颜色的范围，是否有任何简单的方法来创建和应用自定义主题，或者简单地针对特定类并更改其颜色？

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { atomDark } from "react-syntax-highlighter/dist/esm/styles/prism";

const CodeDisplay = ({ active }) => {

const templateString = `
    const NewObject = New Shop(
        console.log('shop');
    )
`
    return (
        <>
            <SyntaxHighlighter
                language="jsx"
                style={atomDark}
                wrapLongLines
                customStyle={{
                    backgroundColor: "transparent",
                    opacity: "1",
                    marginTop: "-2rem",
                }}
                codeTagProps={{
                    style: {
                        color: "white",
                    },
                }}>
                {templateString}
            </SyntaxHighlighter>
        </>
    );
};

输出截图

因此，我从 Creative Tim 的网站购买了高级仪表板主题，现在当我尝试使用它时，我无法安装软件包。当我运行时，npm install出现以下错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: argon-dashboard-pro-react@1.2.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0" from react-bootstrap-table-next@4.0.3
npm ERR! node_modules/react-bootstrap-table-next
npm ERR!   react-bootstrap-table-next@"4.0.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with …