React不识别DOM元素上的“Color`属性
React是一个用于构建用户界面的JavaScript库。它使用组件化的方式来构建UI，并通过虚拟DOM的概念来实现高效的页面更新。
在React中，DOM元素的属性应该使用驼峰命名法，而不是使用连字符分隔的命名方式。因此，React不会识别DOM元素上的"Color"属性，而是应该使用"color"属性。
"color"属性用于指定文本的颜色。它可以接受各种颜色值，包括预定义的颜色名称（如"red"、"blue"等）、十六进制颜色码（如"#FF0000"表示红色）以及RGB颜色值（如"rgb(255, 0, 0)"也表示红色）。
在React中，可以通过内联样式或CSS类来设置元素的颜色。如果使用内联样式，可以通过JavaScript对象的方式来指定样式，例如：
<div style={{ color: 'red' }}>Hello, React!</div>如果使用CSS类，则可以在CSS文件中定义相应的样式，并在React组件中使用该类名，例如：
<div className="red-text">Hello, React!</div>对于内联样式的设置，可以使用React提供的style属性，将样式属性作为对象传递给该属性。对于CSS类的设置，可以使用React提供的className属性。
腾讯云提供了云计算相关的产品和服务，其中包括云服务器、云数据库、云存储等。您可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的产品和服务信息。
相关·内容
2回答
当我试图传递道具时，我就会犯这个错误。非常基本的东西。
interface Props extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, ChakraProps {
handleMoveAll: () => void
}
export const MyWrapper: FC<Props> = (props): JSX.Element => (
<div {...props}>
<IconBox label="Move Al
浏览 5提问于2021-02-12得票数 17
回答已采纳
我正在使用test -library/react来路由单元测试，下面是我的代码，我的测试用例通过了，但是我得到了控制台错误。
React不识别DOM元素上的支柱.
知道吗？下面是我的代码和错误截图
import {render, screen} from '@testing-library/react'
import {createMemoryHistory} from 'history'
import React from 'react'
import {Router} from 'react-router-dom'
impor
浏览 5提问于2021-08-11得票数 3
回答已采纳
我有一个演示here 此应用程序正在设置react Link组件的样式。 我有一个链接样式组件上的isActive道具。 控制台对此进行了抱怨，因为它不能将isActive识别为a DOM元素上的道具 文档中说，解决方法是 import { Link as ReactRouterDonLink } from 'react-router-dom'; 然后 const Link = ({isActive, children, ...props}) => {
return(
<ReactRouterDonLink {...props}>
{
浏览 50提问于2021-07-29得票数 0
回答已采纳
我有一个弹出窗口的反应组件。PopupContent将作为子元素接收DOM元素或其他响应组件。
class PopupContent extends React.Component {
render() {
return(
<div>
{React.cloneElement(this.props.children, {closePopup:this.props.closePopup})}
</div>
);
}
}
closePopup道具设置
浏览 0提问于2018-08-27得票数 2
回答已采纳
1回答
带有样式组件的Redux表单
、、、、
我正在尝试创建一个可重用的组件，其中我返回了redux-form <Field />，在这个组件中，我用styled-component设置了它的样式。
我所面临的挑战是，没有一种风格能够反映
这是我的simple-field-input.styles.ts
import React from 'react';
import { Field } from 'redux-form';
import styled from 'styled-components';
import { SimpleFieldProps } from '
浏览 6提问于2020-11-12得票数 1
我正试图围绕react路由器-dom NavLink组件创建一个包装器组件。
我希望我的自定义组件能够接受所有的NavLinks道具，并将它们代理到NavLink。
然而，当我这样做的时候，我得到的是：
警告: React不识别DOM元素上的staticContext支柱。如果您有意地希望它作为自定义属性出现在DOM中，则将其拼写为小写staticcontext。如果意外地从父组件传递它，请从DOM元素中删除它。
有关这一问题的工作演示可在这里找到：
浏览 0提问于2018-03-19得票数 52
回答已采纳
2回答
在一个按预期工作的React应用程序中，我有以下样式化的组件：
const BaseButton = styled(Button)<{ borderColor: string }>`
border-color: ${({ borderColor }): string => borderColor};
`;
但是，它在控制台中生成此警告消息：
React不识别DOM元素上的borderColor支柱。如果您有意地希望它作为自定义属性出现在DOM中，则将其拼写为小写bordercolor。如果意外地从父组件传递它，请从DOM元素中删除它。
为了避免这种情况，我尝试实现
浏览 3提问于2019-11-06得票数 3
回答已采纳
我希望你能理解这个简单的例子。
我试图在第一次渲染时更改HTML元素的背景色，方法是在React组件中使用jQuery进行处理。
这是我的React组件中的代码(支持是从父组件的状态传递的)：
class QuoteBox extends React.Component {
constructor(props) {
super(props)
}
componentDidMount() {
$('#root').css('background-color', this.props.color);
$('#t
浏览 1提问于2021-12-30得票数 0
我试图将道具传递给我的组件子组件，但是我有一个错误:标签上有一个未知的道具“用户”。从元素中移除这个支柱。
在查看文档和问题时，我想我理解给React.cloneElement (第二个参数)的道具必须是DOM识别的属性。
因此，我的问题是如何将道具传递给组件子组件，并使它们在this.props中可访问？
这是我的代码：
render() {
const { children } = this.props
const { user } = this.state
const childrenWithProps = React.Children.map(childre
浏览 4提问于2017-09-27得票数 5
1回答
我已经搜索了这个错误一段时间了，但是没有找到一个解决方案...我使用的是样式组件和ant.design。 按钮组件 import React from 'react'
import {Btn} from './style';
const ComponentButton = (props) =>{
const {title, backgroundColor,color, hoverColor, handleClick,shape} = props
return(
<Btn
shape={shape || &
浏览 9提问于2020-06-16得票数 1
回答已采纳
1回答
在使用ReactJS方面，我还是个新手。我想为特定的表单创建一个类，但它不起作用
以下是我的代码
import React, { Component, PropTypes } from 'react';
import s from './style.scss';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { Grid, Row, Col } from 'react-bem-grid';
class OrderDetails ext
浏览 4提问于2016-02-23得票数 6
回答已采纳
首先:我知道关于这个错误已经有几个问题了，但是他们有一个不同的来源(我想)。这是我的密码：
<BrowserRouter>
<React.Fragment>
<Navbar className='navbar_all'>
<Navbar.Header>
<Navbar.Brand>
<Link className='navbar_brand' id='home'
浏览 1提问于2018-11-30得票数 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
回答已采纳
我正在学习javascript，特别是react.js，我遵循的是一个，但是在理解扇式jsx语法方面有问题。
import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
let AddTodo = ({ dispatch }) => {
let input
return (
<div>
<form
onSubmit={e => {
浏览 2提问于2017-08-16得票数 0
我一直在玩这个js：中显示如何使用css的jsfiddle。
在上面的jsfiddle中，以下三个函数似乎不推荐用于React v0.13.1。
var View = React.DOM.div;
var Text = React.DOM.span;
....
React.renderComponent(<div style={{width: '100vw', height: '100vh'}}><StyleDemo /></div>, document.body);
对于React 0.13.1，重构后的代码应该如下所示
v
浏览 4提问于2015-03-22得票数 0
回答已采纳
我创建了一个material列表，其中每个ListItem都是一个按钮，但是当我试图访问按钮的名称支柱时，它给出了一个未定义的名称。
import React from 'react';
import LoginFront from './login/loginFront';
import {BrowserRouter, Route} from 'react-router-dom';
import {List, ListItem, ListItemText} from '@material-ui/core';
class App
浏览 0提问于2019-01-22得票数 2
回答已采纳
我有一个反应类型成绩单项目和有问题的登录表格。
下面是反应性登录表单代码。
login-form.tsx
import * as React from 'react';
import {
Button,
FormGroup,
Input,
Label
} from 'reactstrap';
import {observer} from 'mobx-react';
@observer
export class LoginForm extends React.Component {
form: any;
浏览 4提问于2017-11-01得票数 0
回答已采纳
React不识别DOM元素上的computedMatch支柱。如果您有意地希望它作为自定义属性出现在DOM中，则将其拼写为小写computedmatch。如果意外地从父组件传递它，请从DOM元素中删除它。
以下是有关的守则：
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
NavLink
} from "react-router-dom";
import "./AdminPage.css";
expor
浏览 1提问于2019-10-19得票数 0
我正在制作我的第一个react应用程序，我遇到了一些有趣的东西，有时我在react上使用className而不是class。我只是想知道它们是可以互换的还是这样是有原因的？我还注意到，当我使用class时，检查元素控制台会问我是否指className，没有错误，只是询问。
提前感谢！
浏览 0提问于2020-05-04得票数 3
回答已采纳
我正在使用redux material，如中所描述的那样。然而，它只是抛出这些错误。
React不识别DOM元素上的transitionAppear、transitionAppearTimeout、transitionEnter和transitionEnterTimeout道具。
我在开发人员工具中检查了它，这些转换属性实际上是从其父CSSTransitionGroup传递给子div的。
因此，DatePicker对话框无法按预期工作。我已经花了超过一天的时间在这上面，但似乎无法让它发挥作用。请帮帮我!
浏览 0提问于2018-02-20得票数 3
这就是我正在做的：
关键部分是：
position: function() {
var container = $(this.getDOMNode());
this._menu = $(this.refs.menu.getDOMNode());
this._menu.appendTo(document.body).
offset({
top: container.offset().top +
container.outerHeight(),
left: container.offset().left
浏览 12提问于2014-05-08得票数 63
回答已采纳
2回答
在我的项目中，我尝试将当前的CSS样式应用于div元素，但由于React.js是，所以访问DOM元素与纯Html和css不同。因此，在访问它之后，我将使用JS修改它。例如:如果<h1>Title in red</h1>的当前CSS颜色为红色，我希望通过JS将其更改为<h1>Title in blue</h1>。我试过用
const elem = document.getElementByClassName("title");
const color = window.getComputedStyle(elem).getProp
浏览 2提问于2020-10-06得票数 0
回答已采纳
拥有
:read-only, [readonly] {
background-color: aliceblue;
}
<form>
<h2>test</h2>
</form>
在调试时，例如在Chrome中，如何检测h2(或form)字段具有:read-only属性(或其他类型的选择器，如:disabled等)设置为true
PS。
为了澄清这个问题:问题不是针对这个具体案例的CSS解决方案，而是一种在devtools (F12 tools)中识别具体元素的方法，如果这个元素有或没有一些选择器，:read-only就是其中
浏览 7提问于2015-06-11得票数 4
回答已采纳
1回答
我创建了一个reactjs组件，方法是使用react rails宝石：
@SettingWidget = React.createClass
render: ->
React.DOM.div
React.DOM.span
style:
color: 'red'
'Hello'
React.DOM.span
style:
color: 'blue'
'World'
我认为：
= react_c
浏览 3提问于2016-01-18得票数 2
回答已采纳
目标
在我看来，要创建一个几乎完美的框架，我希望结合使用和 (主要是创建可以在Aurelia中使用的组件)。
要实现这一点，有几个选项(参见和)
第一个选项的缺点是组件被包装在自定义元素中，我不想对我计划创建的所有元素都这样做。第二个选项非常好，不是组件是从组件实例(而不是html标记)生成的。
已经完成的工作
我现在要做的是创建一个自定义属性，使ReactJS呈现特定元素的innerHTML。
import { customAttribute, inject } from 'aurelia-framework';
import React from 'react
浏览 3提问于2016-06-20得票数 6
我正在编写React.js教程：
我所有的东西都像预期的那样工作，但是由于某种原因，当我用类将额外的HTML应用到我的表单时，样式化就不适用了。我检查了一些额外的文档，但是找不到为什么额外的HTML不会呈现的原因。
表单元素将呈现，但没有任何与‘大-XX列’类将呈现。
有什么想法吗？
var CommentForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var creator = this.refs.creator.value.trim();
var mr = thi
浏览 4提问于2015-10-22得票数 0
回答已采纳
1回答
在React组件中，我希望能够计算每个子容器的组合高度，在本例中是三个h3元素，以便在设置父div高度转换的动画时计算父div的确切高度。我已经在basic js和组件挂载方法中看到过这样的例子，但是如何仅使用JavaScript获得这些元素的高度呢？
class Div extends React.Component {
render() {
return (
<div>
<h3>Description One</h3>
<h3>Description Two</h3>
浏览 5提问于2017-10-22得票数 1
回答已采纳
我正在尝试使用一个使用大量jQuery的布局/模板的项目。
我已经学会了将模板集成到ReactJS项目中，但是，我正在寻找一个可以完全替换jQuery的解决方案。
我的解决方案之一是在ComponentDidMount()或React的Render()函数中使用Render()函数。
这个方法正确吗？这条路对吗？
我附上一个小例子如下：
import React, { Component } from 'react';
import '../stylesheets/commonstyles.css';
import '../stylesheets/boo
浏览 0提问于2018-07-12得票数 16
回答已采纳
1回答
我有个问题。所以，我正在制作反应组件，我需要有按钮的工具提示。工具提示是有效的，但我不能把它放在我想要的地方(我是说在按钮的中央和上面)。
当我控制日志时，它向mne显示e.target.offsetLeft和e.target.offsetTop是0，但我给了它双方的空间。
但是实际上，当我放置这个必须放置工具提示的代码时，就不会显示整个工具提示：
tooltip.style.left = options.x + (options.w / 2) - (tooltip.offsetWidth / 2) + "px";
tooltip.style.top = (options.y
浏览 9提问于2016-11-30得票数 0
回答已采纳
我有一个图表显示在我的主页上。图形显示正常，但是当我切换到应用程序中的页面并返回到主页时，图形消失了。 我正在使用React中的路由系统在我的页面之间切换。 正在渲染的图的react组件： import React,{Component} from 'react';
class Widget1 extends React.Component{
render(){
return(
{/*begin::Stats Widget 1*/}
浏览 416提问于2021-03-02得票数 1
回答已采纳
我最近开始学习React框架，读到React创建了一个跟踪更改的虚拟DOM。当React更新原始DOM时，它只更新在虚拟DOM上发生更改的对象。这是否意味着，当我只使用普通的javascript编程并附加一个新对象时，即使我只添加了一个新项，整个DOM也会更新？
浏览 3提问于2020-02-13得票数 4
1回答
我在我的Keystone.JS项目中使用了React引导包。为了测试，我尝试在我的索引页面中放置一个按钮。但是，我收到以下警告：
警告：未知道具bsStyle，active，block，navItem，navDropdown，bsClass on tag。从元素中移除这些道具。
这是我使用Button的代码
var React = require('react');
var Layout = require('../../layouts/defaultLayout');
var ReactDOMServer = require('react-do
浏览 3提问于2016-07-21得票数 1
回答已采纳
React同时支持类组件和函数组件。所有React文件的顶部都有一条import React from ‘react’语句。在创建类组件时(如：class MyClassComponent extends React.Component ...)，会明确提到这个类实例从哪个类继承而来。但是，在声明函数组件(const MyFunctionComponent = () => ())时，并没有明确表示“嘿，顺便说一下，这是一个React组件”。
据我们所知，这可能是普通JavaScript中的一个函数。那么，React如何将函数识别为函数组件呢？
浏览 2提问于2018-04-09得票数 6
2回答
假设我想要动态呈现React组件，并获得真正的DOM元素以供将来使用
例如，如果我有一个组件：
function Card({symbol,id,color}){
return <my-card symbol={} id={} color={color}></my-card>
}
我如何渲染它并获得元素？
也许就像这样
const cardElement = React.render(<Card symbol='4' id=111 color='♥'/>)
我需要真正的元素来玩它。做一些测量。然后删除它。
但我认为，
浏览 0提问于2019-01-18得票数 1
2回答
我有一个名为<SensorList />的React组件，它有许多子<SensorItem />(另一个React组件)。我希望能够在每个<SensorItem />上从<SensorList />中声明一个onClick事件。我尝试做了以下几件事：
sensorSelected: function(sensor) {
console.log('Clicked!');
},
render: function() {
var nodes = this.state.sensors.map(function(senso
浏览 0提问于2015-02-02得票数 67
回答已采纳
1回答
我正在学习ReactJS，并在选中复选框时尝试console.log我的id。我尝试过多种方法来做到这一点，我要么得到一个错误，未定义，或null。当它呈现时，span标记确实有它们自己的id。如何从函数中引用它？
import React from "react";
import * as ToDoAction from "../actions/ToDoAction";
export default class ToDoLi extends React.Component{
constructor(){
super();
}
浏览 4提问于2016-11-08得票数 0
回答已采纳
2回答
我在查。它说，当遍历孩子，反应将迭代两个孩子的名单在同一时间，并产生一个突变时，有差异。
我举了一个简单的例子：
class ComponentA extends React.Component {
state = {
first: true
}
clickHandler = () => {
this.setState({
first: !this.state.first
})
}
render() {
return (
<d
浏览 1提问于2018-11-08得票数 0
回答已采纳
如果我定义了以下CSS规则：
img {
max-width: 200px;
max-height: 200px;
border: 1px solid black;
}
是否有一种纯CSS的方法来检测那些没有大小限制的图像对象会更大？语义匹配的东西：
img:resized {
border-color: green;
}
或者:是否有一种方法只检测大的图像在第一？例如：
img {
border: 1px solid black;
}
img[width>200px], img[height>200px] {
max-width
浏览 0提问于2011-08-22得票数 6
回答已采纳
1回答
我相信我想要达到的目标已经做了很多次了，但我无法做到。
我只想测试一个元素是否在某个元素上有一个特定的类。
Splash
import React from 'react';
import { NavLink } from 'react-router-dom'
import Logo from '../shared/logo/index';
import * as styles from './style.css';
class Splash extends React.Component {
render(){
r
浏览 1提问于2017-09-04得票数 2
2回答
我正在写一份登记表，并试图找出一些验证。当我的validate按钮在<form>中时，我也遇到了同样的问题，但是为了解决这个问题，我只是移出了它，因为我猜想该按钮会导致表单刷新。但是，在向"ValidateForm()“函数中插入多个if语句之后，这条错误消息似乎又出现了。
错误: Uncaught : Forename.focus不是函数
at ValidateForm (登录表单ValidateForm)
at HTMLButtonElement.onclick (登录表单HTMLButtonElement.onclick)
function Validat
浏览 1提问于2018-06-15得票数 1
回答已采纳
1回答
我创建了带有类型记录模板的react项目，并使用styled-components库中的样式方法设计了资料-ui Button组件，如下所示：
import React from 'react';
import styled from 'styled-components';
import Button, {ButtonProps} from "@material-ui/core/Button";
type StyledButtonProps = ButtonProps & { primary?: boolean }
const s
浏览 2提问于2021-08-09得票数 0
回答已采纳
我尝试在React pre中突出显示一些文本。但是，它似乎不起作用。它显示[object Object]而不是文本。 const Text = styled.pre `
color: black;
padding-bottom: 10px;
`;
const HighLight = styled.span `
color: red;
`;
let obj = [{
id: 123,
name: 'abcd',
}, {
id: 234,
name: 'new name',
}];
let str =
浏览 13提问于2020-09-22得票数 0
回答已采纳
我遵循了设置material-UI TextField元素下划线颜色样式的示例代码。
但是，当我尝试添加自己的样式时，react无法识别此属性。
<TextField type="number" id="Commission" label="Commission" underlineStyle={{borderColor : orange500}} fullWidth />
我在chrome开发人员控制台中得到以下错误消息
warning.js:33 Warning: React does not recognize the `u
浏览 0提问于2018-04-02得票数 11
1回答
我只是做了一个临时的重新组合，但出于某种原因，所有的道具通过触发一个反应警告。
Warning: Unknown event handler property `onSaveChanges`. It will be ignored.
以及所有具有相同语法的属性(从小写开始，然后是大写: lowerUpper)。当然，如果我写它完整小写，那么它不会触发任何警告，但如果我使用一个特殊的重组合，我是否应该用小写写我的所有道具呢？
我的专案：
import React from 'react'
import { withStateHandlers, withHandlers, wit
浏览 0提问于2018-05-04得票数 6
回答已采纳
我有下面的svg组件来传递道具。
import React from 'react';
export default (props) => (
<svg {...props}>
<path
d="M11.5 16.45l6.364-6.364"
fillRule="evenodd"
/>
</svg>
);
然后我有一个像这样的styled-component。
const Icon = styled(_Icon)`
${props =>
浏览 2提问于2019-10-18得票数 4
回答已采纳
2回答
现在，我正在浏览ReactJS教程，仔细考虑“ReactJS中的思考”一节，尤其是代码的一个方面确实困扰着我：
class ProductRow extends React.Component {
render() {
var name = this.props.product.stocked ?
this.props.product.name :
<span style={{color: 'red', background: 'green'}}> // this line
{this.pr
浏览 6提问于2016-11-03得票数 2
回答已采纳
我有一个用样式组件创建的Input组件：
const Input = styled.input`
${({ boxShadow, theme }) => css`
...
box-shadow: ${boxShadow};
`}
`;
我使用它作为一个独立的组件：
<Input placeholder="Regular input" boxShadow="..." />
以及用于样式设置的React格式组件：
<Input as={NumberFormat} placeholder="Number inpu
浏览 5提问于2022-01-11得票数 0
在Firefox 3.6 (Firebug控制台)中，执行以下操作
$('<div style="-x-foo:bar;color:red;" />').attr("style")
结果：
"color: red;"
为什么无法识别的样式规则会丢失？
浏览 0提问于2011-02-10得票数 2
回答已采纳
我刚开始反应，我是从琳达的一个例子中学习子类的。我正在创建一个名为aptList的新子组件类，并使用this.props.eachItem.ownerName来遍历JSON文件中的每个索引，其中ownerName是一个属性。
这是我在浏览器中运行时遇到的错误。获取数据，但根据错误无法识别prop。
然而，react控制台似乎得到了JSON的罚款
这是林达教授的代码
var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass =
浏览 2提问于2017-06-27得票数 7
回答已采纳
1回答
我是一个全新的反应，由于某些原因，我很难让它正确地呈现一段CSS。
我有一个react类，应用程序应该显示一个卡片，上面有一个进度跟踪器。
var App = React.createClass({
render: function () {
var pushNotifications = _.map(this.props.pushNotifications, function(value, key, notification) {
return (
<div className="row" key={1}>
浏览 2提问于2016-07-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
