无法将className或style之类的属性传递给自定义组件的属性
在React中，无法将className或style等属性直接传递给自定义组件的属性。这是因为React组件的props是用于传递数据的，而className和style是用于控制组件的样式的。
要在自定义组件中使用样式，可以通过props将样式传递给组件，并在组件内部使用相应的方式应用样式。
一种常见的做法是将样式对象作为props传递给组件，然后在组件内部使用style属性来应用样式。例如：
// 父组件
import React from 'react';
import CustomComponent from './CustomComponent';
const ParentComponent = () => {
const customComponentStyle = {
color: 'red',
fontSize: '16px',
};
return (
<div>
<CustomComponent style={customComponentStyle} />
</div>
);
};
export default ParentComponent;
// 自定义组件
import React from 'react';
const CustomComponent = (props) => {
return (
<div style={props.style}>
This is a custom component.
</div>
);
};
export default CustomComponent;在上面的例子中，父组件通过style属性将样式对象传递给自定义组件。自定义组件内部使用props.style来应用样式。
另一种常见的做法是将className作为props传递给组件，并在组件内部使用className属性来应用样式。例如：
// 父组件
import React from 'react';
import CustomComponent from './CustomComponent';
const ParentComponent = () => {
const customComponentClassName = 'custom-component';
return (
<div>
<CustomComponent className={customComponentClassName} />
</div>
);
};
export default ParentComponent;
// 自定义组件
import React from 'react';
const CustomComponent = (props) => {
return (
<div className={props.className}>
This is a custom component.
</div>
);
};
export default CustomComponent;在上面的例子中，父组件通过className属性将类名传递给自定义组件。自定义组件内部使用props.className来应用样式。
需要注意的是，自定义组件内部需要将接收到的props传递给相应的DOM元素或组件，以确保样式能够正确应用。
关于腾讯云相关产品和产品介绍链接地址，可以参考腾讯云官方文档或官方网站获取更详细的信息。
相关·内容
嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。
这是Button的代码，
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES =['btn--primary', 'btn--outline'];
const SIZE
浏览 2提问于2021-03-11得票数 0
我在用React和样式设计一些图标。我使用库作为组件。我使用的组件之一是。它已经有了一个className，我无法用aphrodite风格的passed覆盖它。
<FontIcon className="material-icons">
bug_report
</FontIcon>
如果我在这个控件上设置了样式，它可以很好地工作：
<FontIcon className="material-icons" style={{ color: 'red' }}>
bug_report
</FontIc
浏览 3提问于2017-05-04得票数 1
回答已采纳
我不明白为什么react窗口会在每个(所有) useState events上重新呈现列表，这些值甚至没有连接到列表本身。请有人解释一下，这是如何内部联系，我如何可以避免那些重新渲染？
import React, { useState } from "react";
import { FixedSizeList, areEqual } from "react-window";
function App() {
const [count, setCount] = useState(0);
const handleOnClick = ()
浏览 1提问于2021-10-07得票数 1
回答已采纳
我有一个自定义样式的复选框，该复选框包含在一组映射数据数组中。 {nfcArray && nfcArray.map((item, key) => {
return (
<tr class="hover">
<td className="cell_style pl-3 pl-lg-5">
<Row noGutters>
<Form.Check
浏览 19提问于2019-12-20得票数 0
回答已采纳
我想将道具传递给我的嵌套组件，但是这里的问题是内部卡组件没有显示传递给它的数据，无论是内部文本道具还是内部pct道具。
这是我的index.js
const tst = () => {
return (
<div className="d-flex">
<Card text={"occupied"} pct={75} width={250}/>
<Card width={370}>
<InnerCard2 In
浏览 0提问于2021-12-24得票数 0
4回答
我得到了一个有图片的画廊。在每个图像上有3个图标，当你点击它们时，它们应该会执行操作。我正在尝试激活图像图标上的onclick事件，但是什么也没有发生。图像图标是在渲染功能中用font-awsome创建的。我是JavaScript的新手。
我一直试图在这个网站上搜索其他问题，但没有一个解决方案对我有效。
我想激活的功能是：
setNewSize() {
const size = 500
this.setState({
size
});
}
这里的问题：
render() {
return (
<div
浏览 1提问于2019-05-02得票数 1
1回答
我使用了react select，并对其进行了一些自定义。我试图修改ValueContainer和SelectContainer组件，这会导致一些问题。在选择了一个值之后，当我单击它的外部时，下拉列表不会关闭。我想知道有没有人能看出我在这里做错了什么？
我假设下拉列表不会关闭，因为输入的onBlur事件不会触发。例如，在我用closeMenuOnSelect = true单击一个值之后，输入就不会恢复其焦点。我还假设这是因为因为修改了结构，所以由于某种原因，react select找不到输入。可能缺少了一些裁判什么的，但我不知道从哪里得到它们，把它们放在哪里。有人知道吗？
以下是我的自定义选择
浏览 3提问于2022-02-15得票数 0
回答已采纳
3回答
我正在以我的一种形式使用ReactSelect：
<Select name='event-title' className="event-title" ref="stateSelect" autofocus optionsComponent={DropdownOptions} onInputChange={this.handleChangeTitle} options={this.state.titleResults} simpleValue clearable={this.state.clearable} name="select
浏览 5提问于2016-07-15得票数 3
回答已采纳
3回答
其他类的使用状态
、、
我目前正在做一个学校项目。我有地图定位应用程序。但不知何故我需要传递状态值坐标。但我不能把它分享到下一节课..。有人能帮我吗？
代码：
import React from 'react';
import '../style/card.css';
import '../js/functions/maps';
import Button from './button.js';
import { getLocation } from './functions/getLocation.js';
import './
浏览 4提问于2020-05-25得票数 0
回答已采纳
<Router history={history}>
<div className="container">
<Navbar />
<Switch>
<Route exact path='/' component={HomePage}/>
<PublicRoute exact path='/signup' component={Signup}/>
<Route
浏览 26提问于2018-06-01得票数 0
2回答
我使用的TextField如下所示：
<TextField
style={styles}
className = "my-3"
fullWidth
id="filterBox"
InputProps={{
endAdornment: <SearchIcon style={{color: "white"}} />,
className: styles.input
}}
variant = "outlined"
label
浏览 0提问于2020-06-27得票数 0
我有一份物品清单。当用户单击其中一项时，它会带他到只有此元素的页面。如下所示：
Questions组件：
render() {
return (
<section id='loopContainer' className='display-question'>
<div className='wrapper'>
<ul style={{listStyleType: 'none'}}>
浏览 0提问于2018-06-08得票数 0
回答已采纳
我有一个有状态GrandParent呈现ParentOne或ParentTwo的设计，但是双亲都呈现相同的有状态Child组件。当父组件被更改时，我希望保留Child的状态(以及它可能有状态的子元素)。
我创建了一个很小的代码库来展示我的意思，我还将包括JavaScript，以备将来参考，以防它消失：
function Child() {
const [myState, setMyState] = React.useState(false);
return (
<div>
<p>Is state modified: {myState.to
浏览 10提问于2022-09-16得票数 0
2回答
我有一个我正在尝试构建的React组件。当用户提交数据条目时，addEntry会检测到，并且RenderTable应该以表行格式呈现每个条目： import React, { useState, setState } from 'react';
import ReactDOM from 'react-dom'function
function addEntry({ addEntryData }) {
const data = [{
First: "aaa",
Last: "bbb",
Phone:
浏览 55提问于2021-01-18得票数 0
回答已采纳
2回答
我有个问题，已经过了几天了，我正在学习React和类型记录，我正在开发一个温度应用程序，我被停在了一个部分，我希望用户点击提交表单，输入中输入的信息被传递给另一个组件。
下面是我的两个代码
CityWeatherSearch.tsx
import { MagnifyingGlass } from 'phosphor-react'
import { FormEvent, useCallback, useRef, useState } from 'react';
import * as Styled from './style'
expor
浏览 1提问于2022-06-22得票数 0
1回答
export default function ActionRolesPage(props) {
const [authorities, setAuthorities] = useState([]);
const [name, setName] = useState("");
let list = [];
useEffect(() => {
getAuthorities();
}, []);
const getAuthorities = () => {
doGet
浏览 4提问于2022-06-28得票数 0
在我的下拉选项菜单中，我需要一个输入框。场景是，我需要创建一个带有下拉菜单的新选项，但不允许使用react select的自定义标记创建器功能。
我在文档中发现我们可以传递一个自定义的选项呈现器组件，我也传递了同样的内容，但当我试图将一个输入框放入我的选项组件中时，我无法获得对输入框的控制。
附件中的图片显示了我的选项中的输入，但当我单击输入框时，我无法获得对它的控制。
我的DeleteComponent.tsx ->
import { showDeleteConcernModal } from '../../../actions/modalActions';
浏览 0提问于2017-12-26得票数 3
1回答
我有一个正在重复的组件，它被重复的唯一原因是因为图标、颜色和文本。
import React from 'react';
const TabOne = () =>{
return (
<div className="irequest-tabs users">
<span className="tabOne"><i className="fa fa-sitemap navbuttonIcon" aria-hidden="true"></i&g
浏览 3提问于2016-12-01得票数 1
回答已采纳
我正在尝试建立一个搜索框。但是，当我想要设置输入内容时的状态时，框就是不让我输入任何内容。 这是调用搜索框组件的类 export default class Tagsearch extends Component {
constructor(props) {
super(props);
this.state = {
hitsDisplay:false,
inputContent:"",
tags:[]
};
}
openDisplay = () => {
console.log("
浏览 23提问于2019-06-09得票数 1
回答已采纳
我希望能够在组件呈现之前更改它的style和className，而不是它的render函数。我比这里展示的更多，但这是基本的想法，能够以某种方式将样式和className设置为属性：
只有当"style“变量在render函数中移动，并像normal (如<div style={style}> )一样添加到div中时，下面的方法才有效。我怎样才能让下面的内容工作呢？
编辑：
/** @jsx React.DOM */
var Main = React.createClass({
render: function() {
var result =
浏览 0提问于2014-07-21得票数 18
回答已采纳
1回答
反应地图添加背景颜色特殊元素
、、、、
我使用地图，但我有一个问题，我试图在地图中设置某个元素的背景，在我的例子中，它是"item .title“，我希望我的元素看起来像这个，就像您在控制台中专门设置的图片背景颜色”100%“一样，但是实际上，如果我为sidebar_list类设置了”背景:橙色“，那么该颜色将应用于所有元素，包括rest，，如果我设置了titleName类的背景，它看起来像这个，但是我希望它看起来像这个，如何解决这个问题呢？
Lesson.jsx
import React from 'react';
import less from "./css/lesson.module.css&
浏览 2提问于2020-11-29得票数 0
1回答
React中的得分值不递增
、、、、
我正在构建一个石头/布/剪刀反应应用，但当我试图在我的组件中显示分数的值时，我遇到了问题。这个应用运行得很好，但如果用户赢了，我想增加+1的分数，如果CPU赢了，我想减少-1，并相应地更新UI。
我设法将得分值作为道具传递到组件中，但在我的组件中我无法正确调用。你知道我在哪里搞错了吗?你知道怎么解决这个问题吗？
非常感谢您的提前！
App.js
import React from "react"
import Header from "./components/Header"
import Main from "./components/Main"
浏览 0提问于2020-11-18得票数 0
当我通过从上一个组件中设置this.props.data this.state this.props.data来传递它时，一直没有为它定义它。
下面是正确传递数据和呈现的jobOffer组件：
const JobOffer = React.createClass({
mixins: [Navigation],
getInitialState: function() {
console.log(this.props.data);
return {
listing: this.props.data
};
},
componentDidMo
浏览 1提问于2015-07-09得票数 0
我尝试使用带有react-grid-layout的自定义组件。然而，我不能让它工作。当我将组件放入div中时，我可以调整div的大小，但组件本身不会随之调整大小。当我将组件直接放在网格标签中时，我根本不能调整它的大小或移动它，网格的边界也与组件的边界不匹配。
下面是我的index.js的代码：
function App() {
return (
<div className="App" style={{ background: "grey" }}>
<GridLayout className="layout" cols={1
浏览 0提问于2018-08-15得票数 4
1回答
我已经检查了几个类似的问题，并试图实现他们的答案，但仍然没有运气。代码如下：
import React, {Component, Fragment} from "react";
import Files from "./client/files";
import axios from "axios";
const styles = {
card: {
border: "1px solid transparent",
borderRadius: "8px",
padding:
浏览 8提问于2018-07-19得票数 1
回答已采纳
我有一系列的滑块在一个页面，我有一个特殊的要求，需要添加一个填充滑块，当没有项目低于其0索引。我已经这样做了，但我不知道如何使这个功能只影响我要点击的滑块。现在，它会影响到我地图功能中的所有滑块。
我使用的是反应弹性旋转木马，我的目标是指定的道具，所以功能如下所示
const onPrevStart = (prevItemObject, nextItemObject) => {
if (nextItemObject?.index === 0) {
setFirst(true);
}
};
const onNextStart = (prevItemObject, next
浏览 4提问于2022-07-12得票数 2
回答已采纳
提交后，我无法将选择输入重置为默认的占位符值。当我将所有内容都放在一个文件中时，这是可行的，但在重构以分离组件之后，它不再适用于像this.setState({zipcode: "", currentlyInsured: "", ageRange: "" })那样的重置
下面是我的应用：
import React from 'react';
import carimg from './images/cars.jpg';
import Form from "./Components/Form.js";
浏览 0提问于2019-09-19得票数 0
1回答
使用一种常见的特殊模式，比如这样，效果非常好。但是，有时您确实不希望组件被包装，只想要您传入的同一个组件稍微扩展一下。这就是我在这里苦苦挣扎的原因。
包装器自组织
const flexboxContainerStyles = {
display: 'flex',
flexDirection: 'row',
backgroundColor: 'pink',
}
let WrapInFlexContainer = FlexChild => class extends React.Component {
render(){
浏览 4提问于2016-10-26得票数 0
回答已采纳
我正在尝试通过构建一个表单/计算器类型的应用程序来学习React。我正在学习React是单向的，我似乎找不到使用它的方法。我正在尝试制作一个表格，该表格接受有关改变护理的患者的输入值，然后计算敏感度(难度)水平，并使用该数字对单元上的所有敏感度进行总计，并确定每个班次需要多少工作人员。
因此，我使用了一个组件来构建每个表行，这样我就可以从api创建随机年龄和随机名称，并减少重复性。然后，该组件允许用户选择改变护理级别。如何将Patient.js组件中每一行的敏感度得分返回给父左心室，以便使用它来计算所有患者的累积敏感度级别？当涉及到理解状态时，我非常困惑。谢谢!
//-------------
浏览 0提问于2021-11-04得票数 0
我正在使用带yup验证的Formik，它工作得很好。我想要做的是集成cleavejs来格式化，比如数字格式。问题是，当我的formik字段更改为Cleave时，格式是有效的，但是它不会验证表单。但是，当我更改为input to Field时，验证工作正常，但格式设置不起作用。如何将Cleave js格式传递到我的Formik字段中，而不将Field更改为Cleave她的代码。 我尝试遵循cleave js文档和它的工作，但它在我的验证中不起作用。根据cleave js文档，将输入更改为Cleave，但我使用Field来处理我的formik yup验证。 import React, { use
浏览 14提问于2019-06-12得票数 2
回答已采纳
1回答
我的呈现方法(DownloadReportsButton)中有一个按钮组件，它将触发一个模态onClick并执行一个API调用。
模式和API调用的逻辑已经移动到按钮组件中，但是如何传递数据(名为awsFileKeys的数组)来执行对DownloadReportsButton组件的API调用？
我的看法是：
render() {
const {reportJSON} = this.state;
const content = (
<div className="container">
<div cl
浏览 0提问于2019-02-08得票数 0
回答已采纳
1回答
我有一个API，它在浏览器上显示音乐类别，我试图创建一个用于分页的自定义钩子，但是我一直收到这个错误，对象是不可迭代的。
我是新来的定制钩子，可能真的需要一些帮助。有人能说明一下如何解决这个问题吗？
定制钩
`import React, {useState} from 'react';
import getToken from '../api/getToken';
const usePagination = (initialState) => {
const {categoriesPerPage, data, startFrom} = init
浏览 5提问于2022-05-12得票数 0
回答已采纳
我有一个React组件：
const StyledButton = styled.button`
border: none;
background: ${props => props.color};
color: white;
&:focus {
outline: none;
}
`;
const Button = (props) => {
return (
<StyledButton>{props.name}</StyledButton>
)
};
和另一个组
浏览 10提问于2020-05-07得票数 1
回答已采纳
我尝试使用React lazy和Suspense loading。我有简单的登录页面和懒惰加载动画页面。但是如果我刷新或打开这个页面，我看不到动画。但是当像这样编写fallback = <p> Loading... </p>时，它就是工作。如何在动画中做到这一点？
这是我的延迟加载主页：
import { lazy, Suspense } from "react";
import Login_Register from "../Loadingsss/login-register";
const Example = lazy(()=>
浏览 12提问于2021-06-05得票数 0
我在React web上使用Styled-components已经有一段时间了，但最近我开始开发一个React Native应用程序，我决定在其中使用styled-components。在样式化只有style属性的组件时，比如默认的react-native组件，它是非常棒的。 但是，我遇到的问题是，当我需要对具有多个样式属性(如containerStyle、inputStyle等)的更复杂的组件设置样式时。 当它只有一个具有不同名称的样式属性时，我可以执行以下操作： const StyledBadge = styled(({ style, ...rest }) => {
retur
浏览 44提问于2019-02-21得票数 3
我试图使用一些按钮和一个自定义下拉菜单组件的材料ui制作一个简单的导航条。当我尝试使用makeStyle钩子对其进行样式设置时，样式只适用于资料ui的按钮和标题，而不适用于自定义下拉组件。
import React, { useContext } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { AppBar, Toolbar, Typography } from "@material-ui/core";
import DropDown fr
浏览 0提问于2020-06-11得票数 0
回答已采纳
我正在尝试实现react-grid-layout。所有示例都通过_grid div属性传递网格项配置：
createElement(el) {
...
return (
<div key={i} _grid={el}>
...
</div>
);
},
在我的实施中：
return (
<div key={i} _grid={el}>
<DashboardTestWidget widgetName={el.name} menuName={this.props.menuName}/>
&l
浏览 0提问于2016-07-14得票数 3
回答已采纳
我试图从我的产品组件中使用addItem const，并在Header组件中使用它。我试图将它导出到Header组件，但我肯定做错了什么。addItem在我的产品组件返回语句中的标记中工作得很好。无法使addItem显示在标头组件中的锚标记中。希望这是合理的:)
import React, {useState} from "react";
function Products(props)
{
const [addItem, setAddItem] = useState(0);
function increaseCart(event){
setA
浏览 4提问于2020-06-27得票数 0
回答已采纳
1回答
为什么NextJS中的图像组件中的样式不允许我操作图像。我是不是遗漏了什么？
<Image className={styles.bg}
style={{ transform: `translateY(${offset * 0.5}px)` }}
src="/../public/bg.jpg"
// width={2049}
// height={2049}
// objectFit="cover"
layout="fill"
qu
浏览 10提问于2021-03-01得票数 3
我是react的新手，我正在尝试找出在react中使用内联样式的正确方法。
例如，这是我正在做的事情
import React from 'react';
import Classes from './toolbar.css';
import Logo from '../../logo/logo.js';
import Navitems from '../navigation-items/navigation-items.js';
const toolbar = (props) => {
return (
&l
浏览 2提问于2018-06-13得票数 7
回答已采纳
我正在尝试获取coingecko-api以获取比特币的实时价格。我正在尝试将getServerSideProps的返回属性传递给我的<CalculatorBuy />组件，它是<Main />组件的一部分。我试图在calculatorbuy.js中导入异步函数，但是我得到了未定义的对象。如何将道具从index.js传递到main.js和calculatorbuy.js组件。在index.js中，每件事都很有吸引力，但我想直接在组件中使用道具值。 index.js
export default function Home(props) {
const {data
浏览 18提问于2021-04-05得票数 2
回答已采纳
假设我们使用React-Bootstrap中的Row ...我们如何在不使用包装器或内部元素的情况下设置样式：
<Row>
<div className='some-style'>
...
</Row>
理想情况下，我们可以这样做：
<Row className='some-style'>
...
</Row>
但这不起作用，我认为这是因为React-Bootstrap不知道className在<Row>组件中的位置(它应该只对具有行样式的<div>进行样式设置)
浏览 1提问于2016-07-21得票数 26
回答已采纳
如何将任何类型的CSS应用于redux-form字段组件？className和类被静默忽略：
<div>
<label>Name</label>
<div>
<Field
className="form-input"
name="formContactName"
component="input"
typ
浏览 18提问于2017-12-17得票数 10
2回答
我正在创建一个bookReads项目(如goodreads)，您可以在其中跟踪您的图书。我有一张书桌，每本书都有一个书架。每行都有一个下拉列表，用于更改当前图书的书架。
我的问题是，当我更换一本书的书架时，它会改变所有书的书架。我看了一下，但这里只讨论了一个特定的值，而不是一堆值。我不确定我到底做错了什么。
class ListBooks extends Component {
state = {
query: '',
currentShelf: 'move',
expanded: false,
truncated: fals
浏览 0提问于2018-03-09得票数 0
1回答
求映射元素的性质
、、
想象一下，我有一个数组，然后像这样映射它：
listDetails.map((detail, i) => (
<React.Fragment key={i}>
<PackageDetails styles={styles} detail={detail} />
</React.Fragment>
))}
如何获得单击元素的style和detail？
我不想做另一个映射和比较他们的ID在每次点击。
这个映射为我提供了5个PackageDetails组件。我想得到只点击的组件
浏览 10提问于2022-12-02得票数 0
尝试呈现组件，但收到错误消息。
下面的代码可以正确运行
function InputOption(Icon, title, color) {
return( <div className='inputOption'>
</div>
)
}
export default InputOption
一旦我开始调用这些道具，它就会标记一个错误。
function InputOption(Icon, title, color) {
return( <div className='inputOption'
浏览 8提问于2021-09-02得票数 0
超级简单，或者说，我认为！只是试图将一个字符串传递给另一个组件，但是它不识别该属性，因为它使用的是字符串内插。
编辑
我相信这可能与升级redux表单有关，因为它改变了输入选择器。我使用的是React 15.3.1，我相信它们改变了输入的工作方式，从而影响了Redux。()。
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import { redux
浏览 1提问于2016-10-30得票数 1
回答已采纳
1回答
状态与身份验证一起使用
、、、
我是个编程新手，而且我在if else条件下仍然有问题，我有两个身份验证和一个后端，一个用于react native，一个用于react，在登录中我想要添加is_store，我想告诉系统，如果用户名和密码正确且is_sore = true，则让他登录，如果密码正确，用户名正确，但is_store = false，则不能让他登录
我正在尝试将is_store传递给登录组件，我尝试了if条件，但它给出了错误的警报
注册组件
class RegistationForm extends Component {
state = {
username: "",
phon
浏览 16提问于2019-08-14得票数 1
3回答
我正在尝试使用我的自定义CSS库作为我的组件在NextJS。在我的组件中，我想导入我的自定义CSS文件，但是它不能工作。
import React from 'react'
import '../../style/custom.module.css'
function Footer() {
return (
<div className="a b">
</div>
)
}
export default Footer
我的自定义CSS文件位于
样式/定制.module.css
我看
浏览 1提问于2021-02-27得票数 0
我有一个简单的react组件，它必须在用户要求时从服务器加载数据。问题是我不知道如何在组件加载状态之前传递动态变量speakerUrl并访问它。当然，我可以从this.props.params访问它，但是组件没有加载，当我进行graphql查询时也无法访问它。查询-当我手动设置url变量时，QuerySpeaker运行良好。
路由器
<Route path="/speaker/:speakerUrl" component={SpeakerPage} />
组件- SpeakerPage
import React from 'react';
impor
浏览 5提问于2016-12-07得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
