我使用 create-react-app 创建了一个应用程序。下面是我的计数器组件和测试文件。我正在尝试为组件中的三个静态按钮创建一个测试。第一个测试运行良好，而第二个测试给出了下面提供的错误。
反应成分：
import React from "react";
import PropTypes from "prop-types";
import classes from "./Counter.module.css";
function Counter(props) {
return (
<div className={classes.Wrapper}>
<div>
<p>
Click Counter - {props.value}
</p>
</div>
<div>
<button onClick={props.counterIncrement} className={classes.custButton} name="first"> Increment </button>
{/* <button onClick={props.counterDecrement} className={classes.custButton}> Decrement </button>
<button onClick={props.resetCounter} className={classes.custButton}> Reset </button> */}
</div>
</div>
);
}
Counter.propTypes = {
value: PropTypes.number,
clickHandler: PropTypes.func,
};
export default Counter;
测试文件：
import React from 'react'
import {render, fireEvent, screen, cleanup} from '@testing-library/react'
import Counter from …我这里有一个 React 钩子
export const useConfigDetails = (resourceName: string) => {
const [isLoading, setLoading] = React.useState<boolean>(true);
const [error, setError] = React.useState<AxiosError>(undefined);
const [allEnvDetails, setAllEnvDetails] = React.useState<ResourceDetails[]>();
React.useEffect(() => {
const configPromises = ['dev', 'stage', 'prod'].map((environment: Environment) =>
axios.get('someUrlGetEndpoint'));
Promise.all(configPromises)
.then((resp: ResourceDetails[]) => setAllEnvDetails(resp))
.catch((err: AxiosError) => setError(err))
.finally(() => setLoading(false));
}, [resourceName]);
return { allEnvDetails, isLoading };
};
我想要实现的目标 - 每当resourceName发生更改时，它都需要刷新并调用所有不同的环境 ( dev, stage and prod)，并返回最新的allEnvDetails。它应该避免其他重新渲染
理想情况下，axios.get对应于 3 个环境的调用应该只有 3个。但是，它被调用了 9 次（每个环境调用 3 …
我想向我的 Next.js 应用程序添加平滑的滚动行为，Tailwind CSS 文档指示我们在<html/>.
<html class="scroll-smooth ">
<!-- ... -->
</html>
该文件不包含html标签：
import Head from "next/head";
import "@material-tailwind/react/tailwind.css";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;
如何以及在哪里可以smooth-scroll在我的项目中添加实用程序类？
我有一个在页面加载时<Disclosure>设置的列表（大约 10 个）。defaultOpen
我想通过单击按钮以编程方式关闭披露。例如，按钮会读取内容close all，单击后信息披露将关闭。
const [open, setOpen] = useState(true)
const close = () => {setOpen(false)}
<button onClick={close}>Close All</button>
<Disclosure defaultOpen>
<Disclosure.Button>Open/Close</Disclosure.Button>
<Disclosure.Panel>
<p>disclosure1</p>
</Disclosure.Panel>
</Disclosure>
<Disclosure defaultOpen>
<Disclosure.Button>Open/Close</Disclosure.Button>
<Disclosure.Panel>
<p>disclosure2</p>
</Disclosure.Panel>
</Disclosure>
<Disclosure defaultOpen>
<Disclosure.Button>Open/Close</Disclosure.Button>
<Disclosure.Panel>
<p>disclosure3</p>
</Disclosure.Panel>
</Disclosure>
有没有办法做到这一点？从我发现的文档中：
<Disclosure.Panel>
{({ close }) => (
<button
onClick={async () => {
await fetch('/accept-terms', { method: 'POST' })
close()
}}
>
Read and accept
</button>
)}
</Disclosure.Panel>
但如果不手动单击，我找不到其他任何东西来关闭它们<Disclosure.Button/>
如何将<picture>标签与 Tailwind CSS 一起使用？或者更具体地说，我如何在其中使用 Tailwind 的媒体查询？
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
我尝试更改fontSize，但没有生效：
<Table
style={{overflow: 'hidden', width: '100%', fontSize: '10px'}}
dataSource={data.dataSource}
columns={columns}
size='small'
bordered
pagination={false}
/>
而且我的桌子不适合这个街区。仅显示 3 列，其余的消失。如何解决这个问题？
Talwind CSS 不适用于 React。我已经按照文档（https://v1.tailwindcss.com/docs/installation）安装了 Tailwind CSS，我的代码如下。
有人能帮我吗？
这是我的 package.json 文件
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"autoprefixer": "^10.4.2",
"postcss-cli": "^9.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"tailwindcss": "^3.0.18",
"web-vitals": "^2.1.4"
},
"scripts": {
"build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/style.css",
"start": "npm run build:css && react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [ …根据标题得到错误。我找到的解决方案是针对 Typescript 的，由于我对 JS 和 Tailwind 很陌生，所以我无法从中得到任何东西。我该如何解决这个问题？
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/aspect-ratio'),
],
}
谢谢！
我有一个 Vite React 项目，通过 PostCSS 使用 Tailwind。但是，没有一个类反映本地主机。以下是项目中的文件：
postcss.config.js：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
tailwind.config.js：
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
应用程序.js：
const App = () => {
return (
<div className="App">
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</div>
)
}
export default App
这一切都是按照 Tailwind 文档中的说明完成的，网址为https://tailwindcss.com/docs/installation/using-postcss。
为什么不起作用？
我的 Next.js 项目中有一个复选框，添加一些 Tailwind 实用程序类后，除了宽度、高度和光标的更改之外，没有任何效果。颜色、背景、边框等不起作用。
<div className="flex py-4 m-auto w-2/3 justify-between items-start">
<div className="w-1/7">
<div className="border-b pb-4">
<h1 className="mb-2 font-medium">Filter 1</h1>
<label htmlFor="c1">
<div className="flex group active:ring-2 ring-black rounded">
<input
id="c1"
type="checkbox"
className="rounded-full h-8 w-8 cursor-pointer bg-red-100 border-red-300 text-red-600 focus:ring-red-200"
/>
<p className="pl-2 text-reg cursor-pointer group-hover:underline decoration-solid">
Subfilter 1
</p>
</div>
</label>
</div>
</div>
</div>
cursor-pointer、h-8和w-8是唯一在该复选框中工作的实用程序类。color仍然默认为蓝色，焦点上没有出现环，并且bg仍然是白色。
示例代码中的其他元素（如p、div和 ）h1运行良好。
reactjs ×7
tailwind-css ×6
javascript ×2
next.js ×2
antd ×1
checkbox ×1
font-size ×1
headless-ui ×1
html ×1
jsx ×1
postcss ×1
promise ×1
react-hooks ×1
size ×1
tailwind-ui ×1
vite ×1