样式化组件导致react-dom.production.min.js:4482错误:最小化的React错误#31；
样式化组件导致react-dom.production.min.js:4482错误:最小化的React错误#31是指在使用React开发前端应用时，出现了样式化组件导致的错误。具体来说，这个错误是由于在React组件中使用了样式化组件，但在渲染过程中出现了问题导致React无法正确处理样式化组件的情况。
样式化组件是指使用特定的库或框架来定义和管理组件的样式，例如styled-components、Emotion等。这些库允许开发者将组件的样式与组件的逻辑封装在一起，提供了更加灵活和可维护的方式来管理样式。
然而，当使用样式化组件时，有时会出现一些问题，导致React无法正确处理样式化组件的渲染。这可能是由于组件的依赖关系、样式冲突、样式加载顺序等原因引起的。
为了解决这个错误，可以尝试以下几个步骤：
- 检查样式化组件的依赖关系：确保样式化组件的依赖库已正确安装，并且版本兼容。有时不同版本的库之间可能存在冲突，导致样式化组件无法正常工作。
- 检查样式加载顺序：确保样式化组件的样式文件在组件渲染之前正确加载。有时样式文件的加载顺序不正确会导致样式化组件无法正常渲染。
- 检查样式冲突：如果在应用中同时使用了多个样式化组件库，可能会出现样式冲突的情况。可以尝试使用CSS命名空间或CSS模块化等技术来隔离不同组件的样式，避免冲突。
- 更新React和相关库的版本：有时这个错误可能是由于React或相关库的版本不兼容导致的。可以尝试更新React和相关库的版本，确保它们之间的兼容性。
总结起来，样式化组件导致react-dom.production.min.js:4482错误:最小化的React错误#31是由于在使用React开发前端应用时，使用了样式化组件导致的错误。解决这个错误需要检查样式化组件的依赖关系、样式加载顺序、样式冲突，并更新React和相关库的版本。
相关·内容
我有一个无状态函数组件(请参阅下面的标题)，它使用React render在呈现时显示一些简单的标题元素。除了没有内部状态之外，Title也不会从它的父组件(GameHeader)接收任何支持。但出于某种原因，每当我从树中的另一个无关组件更新整个应用程序状态时，Title仍然会继续被重新呈现，这会导致React显示动画每次发生不相关的应用程序状态更改时都会运行。
// GameHeader.js
import React from 'react';
import Title from './Title';
import Options from '.
浏览 5提问于2020-11-29得票数 1
我正在尝试使用react-beautiful dnd创建一个非常简单的、可拖动的元素列表。当我尝试使用快照并分配snapshot.isDragging的值时，我得到一个错误。 然后我尝试给它一个布尔值，但还是得到了一个错误。 我从这里得到了一个打字错误，说这个属性不存在。 29 | {(provided, snapshot) => (
30 | <Container
> 31 | isDragging={false}
| ^
32 |
浏览 62提问于2020-08-29得票数 0
回答已采纳
1回答
我有一些困难，在使用风格的组件在一个反应应用程序(创建-反应-应用程序)，我也使用材料-用户界面。
我是一个关于样式组件的noobie，所以我尝试在一个基于另一个资料ui组件的样式组件内设计一个素材ui组件。为了澄清我想要做的事情，下面是代码：
const StyledContainer = styled(Container)`
background-color: ${props=>props.theme.defaultBackground};
${FormControl} {
width:100%;
}
`;
容器和For
浏览 8提问于2020-04-14得票数 0
回答已采纳
import React from "react"
import styled from 'styled-components';
const Segment = styled.div`
background-color: #1070ff;
box-sizing: border-box;
border-bottom: 6px solid #ffffff33;
width: 400px;
height: 70px;
&:first-of-type {
background-color: re
浏览 10提问于2019-11-10得票数 0
回答已采纳
1回答
我现在正在看关于Udemy上的React的课程。我决定继续使用样式组件而不是CSS模块，主要是因为我没有让第一个模块正常工作。第一个运行得很好。然而，它忽略了我的CSS转换。 import React from 'react';
import styled from 'styled-components';
const modal = (props) => {
const ModalDiv = styled.div`
position: fixed;
z-index: 500;
background-color: whi
浏览 17提问于2020-01-22得票数 0
回答已采纳
我通过导入react-bootstrap组件来使用react-bootstrap，但是由于某种原因，类样式并没有应用于元素，即使我可以看到bootstrap类被赋予了DOM中的相应元素。我使用自己的类来定位，它不会覆盖任何东西。有没有人知道哪里会出问题？例如：
import React, { Component } from 'react'
import {Alert} from 'react-bootstrap'
class Error extends Component {
render() {
const {errorText} = this.props
浏览 1提问于2017-04-22得票数 1
我真的对此束手无策。我正在尝试构建和部署一个Gatsby站点，在尝试构建静态HTML页面后，我得到了上面的错误。CSS和JS文件的构建都没有问题。
我也得到了一个WebpackError：WebpackError: Minified React error #130;，它可以在这里找到：
建议此#130 error是由于在同一文件中混合了import和require调用。我已经遍历了我的整个目录，寻找类似的东西，但我找不到发生这种情况的任何地方。我似乎也没有Gatsby文档对这个错误提出的任何其他问题。
其他人遇到过这个问题吗?如果有，你的解决方案是什么？我不确定如何发布代码，因为我甚至不知道
浏览 1提问于2018-10-01得票数 2
1回答
我是初级开发人员，我在react (gatsby，TS，styled components)项目中工作。我得到了这个错误： React无法识别DOM元素上的isOpen属性。如果您有意希望它作为自定义属性出现在DOM中，请将其拼写为小写isopen。如果意外地从父组件传递了它，请将其从DOM元素中删除。 export const Navigation = () => {
const [isNavigationOpen, setIsNavigationOpen] = useState(false);
const { isTablet } = useQuery();
浏览 31提问于2021-09-27得票数 2
回答已采纳
我正在使用react，现在我想在div中添加一个背景图像。图片网址来自道具。但是没有显示背景，内联css的代码如下所示
import React from 'react'
export default function City(props) {
const image = props.img ;
return (
<div className='col-lg-4 col-md-4 col-sm-10 ' style={{
backgroundImage: `url
浏览 9提问于2022-03-11得票数 0
1回答
在处理JSON查看器时，我在识别呈现性能的瓶颈方面遇到了问题。由于元素不多，它执行得很好，但在某一点上，它变得缓慢得令人讨厌。
查看分析器，元素呈现的速度似乎够快了，但我注意到了一些问题，我不知道如何处理。
概述
该应用程序是一个JSON查看器，它允许您同时展开/最小化所有元素以及单个元素。
少数元素的性能很好，但随着元素数量的增加，性能似乎会急剧下降。
当使用performance.now()分析我的对象筛选方法以及检查React中的呈现时间时，这些图形似乎没有问题。我可能理解错了。
我尝试过在无状态元素上使用React.memo() (特别是键/值，这是最常见的组件)，但它
浏览 2提问于2020-08-15得票数 5
回答已采纳
1回答
我在一个项目中使用了样式化的组件，并且刚刚添加了react通知。当我试图使用样式化的组件来对我的NotificationContainer及其后代进行样式设计时。相反，我得到了一个不起眼的基本NotificationContainer。我是犯了一个错误，还是反应--通知根本不兼容？
import React, { Component } from 'react'
import {NotificationContainer, NotificationManager} from 'react-notifications';
import styled from &
浏览 0提问于2018-07-11得票数 0
回答已采纳
我需要一个具有关闭和最小化功能的‘弹出窗口’，就像Gmail在我的react js应用程序中用于新消息的窗口一样。你知道怎么做吗？
这是一个组件，即使我在应用程序中导航，它也将保持可见。
浏览 54提问于2021-10-18得票数 0
1回答
这是我能想到的最基本的例子：
import React from 'react';
import {
css,
} from 'styled-components';
const Foo = (props) => {
console.log(props);
const {
children,
} = props;
return <div {...props}>{children}</div>;
};
export default () => {
return <div
cs
浏览 5提问于2020-10-10得票数 1
回答已采纳
1回答
我正在尝试发布我的React组件库。但是当我安装我的库并在create-react-app中测试它时，我得到了一个错误。
我尝试更改了React组件库的许多模板。例如Rinsejs和create-react-library。但它仍然不起作用。
这是我的存储库。
我通过Npm在create-react-app中安装库，并使用它，如下所示。
import React from "react"
import logo from "./logo.svg"
import Controller from "omni-slide-editor"
import
浏览 75提问于2019-11-04得票数 1
回答已采纳
我正在研究在React应用程序中设置页面样式的最佳方式。我在react中看到了很多可以样式化的库，比如Styled Components，Glamor，CSS Modules。
在我目前的项目中，我正在使用CSS模块(主要是为了摆脱css冲突和页面特定的CSS)。我用谷歌搜索了很多关于为什么我应该使用样式组件和CSS-in-JS的问题，但我没有得到任何具体的答案。所以我的问题是，使用CSS-in-JS或样式组件是否有实际的性能优势，或者它只是语法上的糖。
浏览 0提问于2018-09-19得票数 26
示例代码(学习反应代码示例，pp 146-150)；
请注意，与两年前编写的这本书不同，我正在尝试使用样式组件实现相同的功能。在本书中，CSS全部是在app.css中完成的，星空组件如下所示：
const Star = ({ selected=false, onClick= f=>f }) =>
<StyledStar className={(selected) ? "selected star" : "star"}
onClick={onClick}>
</StyledStar>
app.css看起来是这样
浏览 4提问于2019-11-05得票数 2
回答已采纳
1回答
我的问题类似于，但是我需要键入一个组件。我尝试过多种方法，但仍然会出现错误。
我不确定问题是在我的理解中，还是我做错了什么？以下是我尝试过的：
第一种方法工作正常，但抛出警告: React不识别DOM元素上的isActive支柱
第二和第三抛出TS错误:没有重载匹配此调用。
import * as React from "react";
import TextareaAutosize, { TextareaAutosizeProps } from "react-textarea-autosize";
import styled from "
浏览 0提问于2020-05-29得票数 0
回答已采纳
在过去的8个月里，我一直在一个大型项目中使用样式组件(目前使用的是v4.3.2)，这是我第一次遇到这个问题，我不知道该如何修复，也不知道为什么会发生这个问题。以下是复制此问题的CodeSandbox的链接： https://codesandbox.io/embed/stoic-pine-5iixv 当我去给一个预先存在的样式组件添加新功能时，这种情况就开始发生了。看起来包含withTheme HOC是最初导致错误发生的原因。以下是我在开始添加新功能之前的组件： import styled from "styled-components";
import { Flex } fr
浏览 20提问于2019-08-31得票数 1
因此，我正在为该公司构建一个设计系统，并且组件系统在设计系统故事书中正确显示。但是当我将它导入到消费者应用程序中时，我得到了以下错误 TypeError: Cannot read property 'width' of undefined in theme.border.width 设计系统工程： /// src/components/Button/index.js
import { Wrapper } from './styles'
import React from 'react'
export const Button = (props
浏览 20提问于2021-02-03得票数 2
回答已采纳
到目前为止，我已经和Grunt一起使用了sass，其结果是我将x .scss文件编译成style.css。
我在React中只做了一个项目，这是我第一次使用Vue.js，所以我想了解一些事情。
如果我想将css样式包含在与Vue组件相同的文件中，我只需使用
<style lang="sass">
@import '_card.scss'
// Custom CSS code here
</style>
据我所知，Vue从所有.vue文件中获取所有样式，并将其编译成style.css。但既然我不确定，我就问这个；
是否在运行时
浏览 2提问于2017-08-10得票数 3
回答已采纳
2回答
试着学习React/RoR，在这个简单的测试应用程序中，我有一个“搜索章节”的react应用程序。这设置了语言无线电盒的默认设置。
import React from 'react'
import ReactDOM from 'react-dom'
import axios from "axios";
import SearchForm from "./searchForm";
class SearchApp extends React.Component {
constructor(props) {
super
浏览 1提问于2021-10-15得票数 1
回答已采纳
这是我正在使用的代码。反应完全正确。但是setState方法不会更新状态并向我显示"“的初始状态。我做错什么了？我正在使用它们，但这是第一次发生。
“反应”："^16.2.0""react-dom"："^16.2.0"
const [name, setName] = useState("");
const [gender, setGender] = useState("");
const [skillSet, setSkillSet] = useState([]);
const [dob, setDob]
浏览 4提问于2020-02-03得票数 0
回答已采纳
4回答
如果我在我的项目中添加了@type/styled组件，那么构建输出中就会出现一堆错误：
ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(36,15):
TS2300: Duplicate identifier 'FormData'.
ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(81,5):
TS2717: Subsequent property de
浏览 0提问于2019-02-15得票数 30
回答已采纳
2回答
我正在构建一个表单，其中有与状态绑定的输入。问题是，当我输入字段"Order“或"Output Requirement”时，输入字段继续失去焦点。我已经读到，如果在函数中返回表单，可能会发生这种情况，但对我来说并非如此。
我也确信"LabelledIconInput“不是问题，因为我在登录页面中使用它，而且我没有这样的问题。
有人能给出为什么会发生这种情况的指示吗？
存在问题的输入(这些输入在/components/中的单独文件中定义)：
<LabelledDropdown
label="SEASON*"
浏览 8提问于2022-04-06得票数 1
回答已采纳
一天前，我有一个React+Typescript项目运行得很好！当我今天尝试运行它的时候，突然发生了100个相同类型的错误。
错误类型如下：
class Home extends React.Component{
constructor(props) {
super(props);
this.state = {
x:true;
y:true;
};
}
toggleone = () => {
this.setState({ x: !this.
浏览 6提问于2021-05-21得票数 1
有没有办法把另一个变量的返回值传递给样式化的构造函数" styled (xx)"？
我得到一个错误:对象作为React子对象无效(发现:带有键的对象{$$typeof，render，propTypes})。
import styled from 'styled-components/macro';
import { Link as LinkR } from 'react-router-dom';
import { Link as LinkS } from 'react-scroll';
const Link = props =&
浏览 7提问于2021-02-19得票数 0
1回答
我需要为我的react组件库添加全局样式选项。我添加了全局样式，如下所示
import { createGlobalStyle } from 'styled-components';
export const GlobalStyle = createGlobalStyle`
button{
color: white;
background-color: green;
}
`;
我已经导出了组件，以便使用my-ui-libray的应用程序可以使用它。
export * from './GlobalStyle.js'
我在一个react
浏览 13提问于2022-05-01得票数 2
当我安装一个新的create-react-app并添加babel-plugin-styled-components和向babel-plugin-macros.config.js添加displayName选项时，它不会像文档-> 那样添加可读的classNames。
下面是配置的回购程序
P.S .我不想弹出
浏览 4提问于2021-12-01得票数 9
回答已采纳
5回答
我想在我的按钮组件中实现一个颜色选项，以便在我的所有全局组件中使用它，这样我就可以动态地更改文本和颜色 这是正确的吗？ import React from 'react';
import './Button.css';
const Button = ({text, BtnVersion1}) => {
return (
<a href="#" style={{color: {BtnVersion1}}} className="buy">{text}</a>
)
浏览 37提问于2021-04-08得票数 0
回答已采纳
我无法使用react-table(从“react-table”导入ReactTable )，但我在浏览器控制台中收到以下错误：
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warni
浏览 2提问于2021-03-17得票数 0
我将一个defaultColors对象传递给一个styled-components按钮元素，但是无论我做什么，似乎都不能让它看到这个对象。 const ButtonPrimary = styled(Button)`
background-color: ${({ defaultColors }) => defaultColors.primary ?? "blue"};
color: ${({ defaultColors }) => defaultColors?.secondary ?? "orange"};
width: 5rem;
浏览 10提问于2020-09-18得票数 0
回答已采纳
2回答
我是比较新的React，我被困在使用样式化组件来样式化组件。
const SearchBarContainer_Button = styled.button`
padding: 10px;
margin-left: 10px;
width: 300px;
`;
<ButtonOne
style={SearchBarContainer_Button}
type="submit"
className="search-bar__button"
>
{this.props.buttonText || &
浏览 0提问于2018-04-27得票数 0
我正在使用样式-组件在一个反应项目。到目前为止，它一直运行良好，但现在我想使用包，它要求以以下方式导入其样式：
import "react-datepicker/dist/react-datepicker.css";
但是，导入文件会导致一个"You may need an appropriate loader to handle this file type“错误。我知道我可以通过为.css文件创建一个处理程序来解决这个问题，但我认为我可以通过使用样式化的组件来避免这种情况。
我的问题是，是否有办法处理这类带有样式组件的导入？--我在网上搜索了几个小时，似乎找不到任何
浏览 1提问于2019-06-19得票数 0
1回答
我在我的反应性项目中安装了样式化的组件。但是当我使用样式设计时-组件造型不起作用。是否还有其他设置可用于处理样式组件?请帮助
纱加样式组分
Navbar.jsx
import React from 'react';
import styled from 'styled-components';
const Container = styled.div`
height: '60px';
background-color: 'black';
`;
const Navbar = () => {
return &l
浏览 1提问于2021-11-14得票数 0
Block.jsx代码..。
import React from 'react';
import styled from 'styled-components';
import { WHITE } from '../../constants/color';
const Wrap = styled.div`
width: 100%;
padding: 0 1rem;
display: flex;
align-items: center;
box-sizing: border-box;
background-color: $
浏览 6提问于2022-07-06得票数 0
我用"“接口做了一个react.js应用。当我记录data.result时，它输出正确的结果数组，但是当我映射状态时，我得到这样的错误：“对象作为React子对象是无效的(发现:带有键的对象{})。如果你打算呈现一个子对象集合，请使用一个数组。”
//states
const [definition, setDefinition] = useState([])
const [search, setSearch] = useState('')
const [query, setQuery] = useState('')
useEffect
浏览 2提问于2020-05-11得票数 3
3回答
将代码中的一系列容器添加到GUI构建器中定义的容器时，屏幕宽度上会出现间隔均匀的水平线，与组件的任何边框无关。
这是我的密码：
public Container[] renderArticles(ArrayList<HashMap<String, Object>> articles){
Container[] artArray = new Container[articles.size()];
for (int i = 0; i < articles.size(); i++) {
final Has
浏览 5提问于2016-02-25得票数 1
回答已采纳
我正在学习react，在做项目时遇到了这种情况。 我有下面的场景，其中2个react子组件在标准HTML元素下 如果我需要以单个react子元素为目标和样式，该怎么做呢？ 对于普通的超文本标记语言元素，我会为每个单独的child HTML element分配className并设置它们的样式。 但是这种方法不适用于react component，请建议如何处理它？ ?
浏览 11提问于2021-06-24得票数 1
我正在使用React，并且有一个包含两个组件的页面：
return (
<div>
<NewNavbar />
<Row />
</div>
)
NewNavbar组件如下所示：
const App = () => (
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Br
浏览 4提问于2021-11-24得票数 0
我的控制台上到处都是上述错误的随机实例，但错误的行为似乎不可预测。根据我的理解，我得到了这个错误，因为我已经将一个布尔支柱(如“小”、“绿色”或“主”或类似的东西)传递给了样式化的组件，后者直接将其传递给DOM项。但是，如果您查看样式化组件拥有的 (在基于道具的自适应下)，您将看到我所讨论的确切场景似乎是标准行为。我应该能够说，然后做一些基于这个道具默认为“真”的事情。
有时，我的应用程序似乎对此没有任何问题，而在其他情况下，它会标记它。这个例子是一个很好的例子。
来自NumericInput.js
<DropdownArrowIcon small rotate />
这两个道具
浏览 1提问于2019-09-24得票数 1
2回答
在根据变量的路由将类分配给变量和div时，我遇到了一个问题。我不知道我做错了什么，一切似乎都很好，那么错误在哪里呢？我非常好奇我到底做错了什么。
import React from 'react'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import { useLocation } from "react-router-dom";
import { useEffect } from 'react&#
浏览 10提问于2021-05-27得票数 0
回答已采纳
我正在做react。通常我所做的是在一个单独的文件中设置所有的样式，也就是全局的。我读到还有一些其他方法，比如JS中的组件级别样式或css，但无法得出我应该使用哪种方法?？ 我只是想知道哪种方式适合需要什么..
浏览 20提问于2019-05-09得票数 2
回答已采纳
我想在url中获得id，我尝试了两种方法，但是我得到了一个错误，有人能帮助解决这个问题吗？
错误：
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有错误匹配的版本的React和渲染器(如React )，您可能正在破坏钩子的规则，您可能在同一个应用程序中有多个React副本(参见
url: http://localhost:8080/passenger-update/16
遵循我的代码：
class PassengerUpdate extends Component {
componentDidMount() {
let {
浏览 3提问于2022-07-07得票数 0
回答已采纳
我正在创建一个导航条，但单击时无法显示包装菜单。将isOpen = {isOpen}插入<Sidebar />时发生错误
误差
类型'{ isOpen: boolean；切换：() => void；}‘不能指定键入'IntrinsicAttribute。属性'isOpen’不存在于'IntrinsicAttributes. ts(2322)类型上。
pages/Home.tsx
import React, { useState } from 'react';
...
import Navbar from '../..
浏览 4提问于2021-03-04得票数 0
我试图在React本机中设置一个视图的样式，但是我一直得到这个错误(未定义的对象不是一个对象(计算'styles.screen))。
我做了一个简单的代码..。
import React, {useState} from 'react';
import {StyleSheet, Text, View, Button, TextInput} from 'react-native';
export default function App() {
return (
<View style={styles.screen}>
浏览 5提问于2020-06-11得票数 0
回答已采纳
我正在导出在项目根组件中使用的钩子的返回。然后，其他组件很容易导入globalState和setGlobalState ()。
我在这里做了几次测试，效果很好。问题是，我从来没有见过社区中有人以同样的方式使用它。
import React, { useState } from "react";
import Level2 from "./components/Level2";
export let setGlobalState = () => {};
export let globalState = {};
const initalState = {
浏览 0提问于2019-03-25得票数 1
回答已采纳
我正在尝试编写一个钩子，它接受一个(引用到) input元素并侦听它的更新。因为它是从渲染中解耦出来的，所以在钩子中，我不能直接在元素上使用普通的onInput属性。 在事件侦听器中更新不相关的状态(使用useState钩子)时，输入元素中断，您不能在其中键入内容，插入符号/焦点将改为更改。 为什么addEventListener('input', handleInput)和onInput={handleInput}在react中有这样的不同，解决这个问题的最佳解决方法是什么？ 以下是重现该问题的代码片段： const Hello = (props) => {
浏览 27提问于2021-09-29得票数 2
1回答
我刚开始响应js，我想使用directline令牌调用chatbot。我有下面的代码。我的需要是调用聊天机器人时，按钮被点击，必须尽量减少。我不知道怎么做，这似乎是一个简单的问题。帮我解决这个问题。提前谢谢。
import React from "react";
import { DirectLine } from 'botframework-directlinejs';
import ReactWebChat from 'botframework-webchat';
import "./Login.css";
export
浏览 8提问于2020-02-03得票数 0
回答已采纳
我正尝试为react中的特定组件添加CSS文件，但该CSS文件适用于所有组件如何为特定组件添加style.css？
import React, { Component } from "react";
import { Link } from "gatsby";
import Layout from "../components/layout"
import Footer from "../components/Globals/Footer"
import "./crm2.css"
class Crm exten
浏览 0提问于2020-10-03得票数 1
1回答
我想修改react-select上的边框。我使用的是props className，但实际发生的是创建一个新的边框作为包装器。 这是我的代码： import React from 'react'
import Select from "react-select"
const InputSelect = (props) => {
const { options, placeholder } = props
return (
<Select
options={options}
placeholder={plac
浏览 17提问于2021-10-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
