className属性的React + TypeScript用法
className属性是React + TypeScript中用于设置元素的CSS类名的属性。它可以用于给元素添加一个或多个CSS类，从而实现样式的控制和定制。
在React + TypeScript中，可以通过以下方式使用className属性：
- 直接使用字符串：<div className="my-class">Hello, World!</div>这样会将"my-class"作为CSS类名添加到该div元素上。
- 使用模板字符串：const myClass = "my-class"; <div className={`container ${myClass}`}>Hello, World!</div>这样可以动态地添加CSS类名。在上述例子中，"container"类名是固定的，而"my-class"类名是通过变量myClass动态生成的。
- 使用条件表达式：const isActive = true; <div className={isActive ? "active" : "inactive"}>Hello, World!</div>这样可以根据条件动态地添加不同的CSS类名。在上述例子中，如果isActive为true，则添加"active"类名，否则添加"inactive"类名。
总结：
className属性是React + TypeScript中用于设置元素的CSS类名的属性。它可以通过字符串、模板字符串和条件表达式的方式来动态地添加CSS类名。通过合理使用className属性，可以实现对元素样式的灵活控制和定制。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
腾讯云云服务器（CVM）是一种可随时扩展的云计算服务，提供高性能、可靠稳定的云服务器实例，适用于网站托管、应用程序部署、远程办公、游戏托管等各种场景。您可以通过腾讯云云服务器（CVM）来部署和运行React + TypeScript应用程序。
了解更多关于腾讯云云服务器（CVM）的信息，请访问：腾讯云云服务器（CVM）产品介绍
相关·内容
我有一个可重用的输入组件，我可以在整个应用程序中使用它 import * as React from 'react';
import styles from "./Input.module.css";
interface Props {
input: Object;
label: string;
custom: Object;
meta: {
touched: boolean;
error: boolean;
}
}
const Input: React.SFC<Props> = ({
i
浏览 9提问于2019-01-28得票数 0
回答已采纳
我正在使用Typescript遵循Facebook react教程。然而，这是我第一次使用react和typescript。我想把一个onClick事件传递给'Square‘类，这个类使用typescript实现了一个状态和属性接口。
如何使这个Square类能够接受我的onClick事件并按预期触发它？正在与语法sugar作斗争。
import * as React from 'react';
interface MyProps {
value?: string;
}
interface MyState {
value?: string;
浏览 2提问于2017-03-27得票数 1
2回答
下面是一个用Javascript实现的简单的React App组件。 import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
setting: "def",
limit: 2
}
}
浏览 40提问于2019-12-20得票数 1
回答已采纳
我正在尝试使用我的组件库来使用TypeScript，并试图将React中的无状态功能组件从ES6/JavaScript转换为TypeScript。我想知道如何避免重复自己，同时仍然能够在传递参数时在函数外部解构道具。
我的组件目前看起来是这样的：
const allowedColors = {
warning: "fa fa-exclamation",
info: "fa fa-info",
success: "fa fa-check",
danger: "fa fa-minus-circle"
};
const
浏览 0提问于2018-10-02得票数 21
回答已采纳
1回答
我已经使用React很长一段时间了，现在我想切换到使用。然而，我已经习惯了JSS风格(通过react-jss包)，我不明白我应该如何在TypeScript中使用它们。我还使用classnames包，有条件地分配多个类名，并获得相应的TypeSCript错误。
以下是我的React组件模板：
import React, { Component } from 'react';
import withStyles from 'react-jss';
import classNames from 'classnames';
const styles =
浏览 3提问于2020-01-06得票数 5
回答已采纳
我正在使用TypeScript构建一个React应用程序。我用的是反应光滑的旋转木马。
我正试图以编程的方式更改旋转木马的幻灯片。因此，我遵循并尝试为Slider创建一个ref。我的组件是这样的：
import React from 'react';
import Resur from './Resur'
const Slider = require("react-slick").default;
export interface Item {
title: string;
restur: Rest[];
}
export interface
浏览 0提问于2021-01-23得票数 2
回答已采纳
我正在尝试在TypeScript和React中创建一个通用的master-detail组件。父构件应负责主构件和详图构件之间的协调，即将在主构件中选择的项目的id传递给详图。但是，主构件和详图构件不应在父构件中进行硬编码。这允许我对不同类型的实体使用父MasterDetail。总之，我希望将主构件和详图构件作为道具传递，最好是子构件。
为了说明起见，这里是我的硬编码实现(你可以在上找到一个工作版本)：
const MasterDetail = () => {
const [itemId, setItemId] = React.useState("");
cons
浏览 8提问于2019-07-25得票数 1
回答已采纳
我的React应用程序中有一个组件，它要求我使用style transform属性。当我这样做的时候，我的组件添加了一个对Typescript Transform的引用，现在当我编译我的应用程序时，我得到了以下警告： ./node_modules/typescript/lib/typescript.js
Critical dependency: the request of a dependency is an expression 下面是我的组件顶部的引用： import { transform } from "typescript"; 这是我正在讨论的组件的一部分： &l
浏览 4提问于2021-03-31得票数 0
回答已采纳
3回答
我是TypeScript新手。我有一个下面的组件使用styled-components，我想转换为TypeScript。
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
const propTypes = {
name: PropTypes.string.isRequired // https://material.io/tools/icons/?style=baseline
}
con
浏览 1提问于2019-03-29得票数 12
1回答
要将标准元素包装为自定义组件，并保持正确的接口/类型，正确的方法是什么？ 我通过从包装的元素中复制参数类型来使事情正常工作，但是..它相当冗长。 TypeScript有没有办法从另一个对象复制参数类型？ const NumberInput = (props: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => {
const realInputRef = React.createRef<HTMLInputElement&
浏览 16提问于2021-06-21得票数 1
回答已采纳
? 我在IDE的第16行(<行...)收到这个奇怪的typescript错误。将react es6 comp转换为typescript时。这是一个我使用react-chartjs-2的图表组件。 数据：{ label: string[]；datasets：{label: string；data: string[]；}[]；}；height: number；width: number；options：{ maintainAspectRatio: boolean；scales：{ yAxes：{ beginAtZero: boolean；}；}[]；}；legend：{ ...；}中缺
浏览 29提问于2021-05-04得票数 2
回答已采纳
我创建了一个tsx react组件，如下所示：
export interface FABProps { onClick: Function; children?: any; otherProps?: any }
export interface FABState { onZoomButtonClick?: Function; }
export default class FAB extends React.Component<FABProps, FABState> {
static getInitialState() {
return {onZoomBut
浏览 1提问于2016-09-14得票数 0
回答已采纳
我正在用TypeScript编写一个react组件：
interface Props {
children: React.ReactNode;
href: string;
onClick?: (e: any) => void;
}
const Input: React.FC<Props> = ({ children, href, onClick }) => (
<a className="A" href={href} onClick={onclick(e)}>
{children}
</a>
);
浏览 1提问于2020-02-14得票数 0
我正在使用一种经常被推荐的食谱：
interface IFooProps extends React.Props<Foo> {
bar: string;
}
export class Foo extends React.Component<IFooProps, {}> {
render() {
return <p className={this.props.bar}>{this.props.children}<p>
}
}
但是，React.Props被标记为React 16和适当的@types/reac
浏览 0提问于2018-02-16得票数 0
回答已采纳
我有一个组件(TourSpecPropertiesSection)，它可以访问存储中的对象。我希望它获取这个对象的属性，并将每个属性映射到另一个组件(TourSpecProperty)，该组件将暂时显示名称和值。我已经创建了这两个组件，但是当我尝试在TourSpecPropertiesSection中实例化TourSpecProperty时，我无法设置TourSpecProperty的属性，即使我已经在接口中定义了它们。它会给我一个错误
"Property 'name' does not exist on type 'IntrinsicAttributes &a
浏览 0提问于2018-05-26得票数 1
1回答
我是TypeScript的新手，我有一个事件，我需要知道选择它的元素，这样我就可以在页面上移动另一个元素，但是我很难让它在React中工作。
以下是我到目前为止所拥有的：
import React from "react";
import './BenefitHeader.css';
import BenefitType from "./BenefitType";
import BenefitSelectIndicator from './BenefitSelectIndicator';
interface State {
浏览 1提问于2022-03-09得票数 1
回答已采纳
我是ReactJS的新手。我正在看一个用ES6 JavaScript录制的教程，同时我也在尝试用TypeScript重新创建同样的应用(我也是TypeScript的新手！！)。在ES6中，如果特定组件需要维护自己的状态，则需要使用基于类的方法。我已经安装了"babel-plugin-transform-class-properties"，所以我在ES6中将状态设置为export default class SomeClass { state = { someProperty : someValue }}。但在TypeScript中，我对每个组件都使用基于类的方法。下面是一个试图
浏览 17提问于2018-02-17得票数 3
回答已采纳
2回答
我尝试使用TypeScript为无状态的、功能性的React组件指定默认属性，并使用以下代码：
import React from 'react'
interface Props {
readonly sid?: string,
}
const defaultProps: any = {
sid: '',
}
const ModalBackdrop: React.SFC<Props> = (props: Props): JSX.Element => {
const { sid } = props
return (
浏览 48提问于2019-03-26得票数 1
我有一个带有可选道具的组件。我通过将可选道具传递给Card组件来定义它们的默认值，但是eslint一直告诉我children道具也是如此。下面的代码似乎与此页面上的示例without defaultProps一致：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-default-props.md。 import { ReactElement } from 'react';
interface CardProps {
title: string,
text?:
浏览 114提问于2021-10-23得票数 1
回答已采纳
我想使用material-ui，使用react和typescript。我想把属性传递给组件，但是不知道怎么做。我使用material-UI代码库中的react-typescript示例。我尝试的内容如下：
添加一个属性接口：
const styles = (theme: Theme) =>
createStyles({
root: {
textAlign: 'center',
paddingTop: theme.spacing.unit * 20,
},
});
interface IndexProps
extends
浏览 3提问于2018-08-24得票数 0
回答已采纳
我正在尝试在forwardRef中使用defaultProps。当我在不使用forwardRef的情况下使用MessageBox时，它可以很好地与defaultProps配合使用。但是，当我对它使用forwardRef时，出现了一个错误。如何解决？ typescript：3.4.5 "react"："^16.8.6"， import React, { forwardRef } from "react";
export interface MessageBoxProps {
test: string;
children: any;
}
浏览 44提问于2020-06-23得票数 4
4回答
因此，我有一个React组件，它有一个按钮，其中有一个单击处理程序，它使用了data-*属性。如果这是直接的反应，那么我知道如何从data-*属性中获得值。但是，我正在学习如何使用TypeScript，所以我不知道如何访问这个属性。那么，使用TypeScript访问数据-*属性的最佳方法是什么？
这是我的JSX代码，用于按钮：
<button type="button" className="NavLink" data-appMode={ AppMode.MAIN } onClick={ this.handleAppModeClick.bind(this)
浏览 7提问于2019-10-30得票数 13
回答已采纳
我正在尝试在我的scss文件中使用这些变量，这样我将来就可以直接从这里更改我的主题。但它显示了解析错误，这在以前的项目中是不存在的。 这是一个带有typescript的React CRA项目。 //App.tsx import React from "react";
import "./App.scss";
const lightTheme = {
"--primary": "#27AE60",
"--text-primary": "#000000",
"--ba
浏览 19提问于2021-01-26得票数 0
回答已采纳
我对TypeScript很陌生，并试图了解如何将React代码转换为被键入的代码。目前，我得到了以下错误：
Property 'openMenu' does not exist on type '{ children?: ReactNode; }'
Property 'toggle' does not exist on type '{ children?: ReactNode; }'
Property 'slidein' does not exist on type '{ children?: ReactN
浏览 0提问于2019-09-30得票数 0
回答已采纳
我有一个TypeScript反应视频组件，我想玩点击。我希望通过使用点击处理程序来做到这一点，该处理程序通过ref访问视频并调用.play()，但是我得到了这个错误：
TS2339: Property 'play' does not exist on type 'RefObject<HTMLVideoElement>'.
下面是我的代码(省略了不相关的部分)：
class FullBleedVideo extends React.Component<PropDef, StateDef> {
private fullBleedVideo
浏览 0提问于2018-11-05得票数 7
回答已采纳
我在应用程序中使用react-bootstrap Button，并希望声明扩展Button的ButtonPageChange类，以在属性className中定义值'btn-loading'。 在不使用typescript的情况下，我有以下React组件： export const ButtonPageChange = ({onClick, href, disabled, variant, size, className, children}) => {
return (
<Button onClick={onClick}
浏览 26提问于2020-04-26得票数 0
回答已采纳
有一个简单的条件语句，其中包含component return：
let content = movies.length > 0 ? movies.map((movie, i) => <MovieCard key={i} movie={movie} />) : null;
Typescript在“电影”属性上显示错误：
TS2322: Type '{ key: number; movie: object; }' is not assignable to type 'IntrinsicAttributes & { children?: Re
浏览 9提问于2020-03-02得票数 0
回答已采纳
我开始学习typescript，使用React，所以在我前进的过程中，我试图创造一些场景来练习。 export enum Colors {
Blue = "#0000FF",
Red= "#FF0000",
Green = "#00FF00",
}
export const ColorComponent React.FC<props> = ((props): JSX.Element => {
// props will receive dynamically one of the options (Blue,
浏览 18提问于2019-10-18得票数 0
回答已采纳
我使用typescript来实现react组件。我正面临着一个定义泛型类型的问题。代码如下：
interface Props<T> {
classes: { [className in keyof typeof styles]: string };
style?: React.CSSProperties;
value?: T;
label: string;
onChange: (e: T) => void;
}
export const OutlinedInputField = withStyles(styles)(
<T extends st
浏览 3提问于2019-05-15得票数 0
当我第一次开始在react中修改typescript时，我注意到我不能使用...props，因为typescript会检查传入组件的每一个属性。它很棒，但也很烦人，我不得不将id、name等原生道具作为道具进行声明。
interface MyComponentProps {
name: string,
id: string,
placeholder: string
}
const MyComponent = ({
name,
id,
placeholder
}: MyComponentProps) => {
return <input type=
浏览 14提问于2020-05-06得票数 1
回答已采纳
我目前正在创建一个新的反应应用程序的创建-反应应用。在此之后，我安装了扩展插件的eslint :react/推荐和google。2周前，我也这样做了，我没有遇到任何问题，但是从2天开始，我就得到了数组中元素“index.tsx和App.tsx文件中的每个html行中的错误”的“缺少的键”支柱。
index.tsx
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
im
浏览 5提问于2022-02-25得票数 2
回答已采纳
我想知道在React中是否或多或少有使用class属性而不是className的正式方法。
并在样式属性{{ 'background-color': 'red' }}中使用普通名称，而不是其驼峰大小写版本的{{ backgroundColor: 'red' }}。
理想情况下，支持TypeScript。
浏览 0提问于2019-12-04得票数 2
我在用TypeScript书学习React的时候遇到了麻烦。我放弃了，直接从书中复制粘贴的代码，但编译器仍然不满意 我目前的解决办法是提供“任何”值，而不是IProps，但这是一个廉价的技巧。 不起作用的代码： import * as React from 'react';
interface IProps {
loading: boolean;
}
const withLoader = <P extends object>(
Component: React.ComponentType<P>
): React.FunctionCompon
浏览 30提问于2019-02-08得票数 3
回答已采纳
尝试访问RecipeList.js和Recipe.js的.props时出现语法错误。
以下是Recipe.js的代码示例：
import React, {Component} from 'react';
import "./Recipe.css";
class Recipe extends Component {
// props: any; uncommenting this will fix the bug
render() {
// don't have to use return and parenthese
浏览 0提问于2018-09-10得票数 33
回答已采纳
我正在使用react-bootstrap-typeahead，添加了来自@types/react-bootstrap-typeahead的类型 在我的来自react functional component的typeahead中，我尝试访问typeahead引用并调用组件的公共方法，就像给定的here一样 从‘react-bootstrap- Typeahead’导入{typeahead}； const typeahead = React.createRef();
<Typeahead
ref={(ref) => typeahead = ref}
id="basic-t
浏览 14提问于2020-10-28得票数 0
有时，当我尝试将.jsx或.js文件重命名为.ts或.tsx时，我在typescript编译过程中遇到非常令人沮丧的错误。
TypeScript error in undefined(undefined,undefined):
Type 'never' must have a '[Symbol.iterator]()' method that returns an iterator. TS2488
我花了很长时间才弄清楚文件重命名是问题所在。我已经这样做了几次，不得不一个文件一个文件地回滚到我最近的工作提交和合并，结果却发现一切都正常，代码与损坏的代码完全相同
浏览 1提问于2021-06-07得票数 1
我正在构建一个使用react + typescript的费用跟踪应用程序 expense_type.ts export type IState = {
id : number,
text : string,
amount : number
}
export type IinitialStateType = {
transactions : IState[]
}
export type IActions = {
type : string,
payload : any
}
export type contextProps =
浏览 21提问于2021-02-01得票数 1
回答已采纳
我以前使用过react，但使用类型脚本时，我遇到了将方法作为道具进行传递的问题。我很难理解互联网上的一些例子。 类型'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ companyId: string；}> & Readonly<{ children?：ReactNode；}>‘上不存在属性'onDrawerToggle’。TS2322 import React from 'react';
import HeaderBar from '
浏览 18提问于2020-04-21得票数 0
我是否可以在整个React元素上使用鼠标事件，或者我必须将其传递给子元素才能使其工作？在几个函数组件之后，我传递了我的handleEvent函数，我想知道是否可以在不得到TypeScript错误的情况下。我的代码非常简单
<Tile onHover={handleHover} name="Random name"/>
和平铺组件
export const Tile: React.FC<{ name: string }> = ({ name }) => {
return (
<div className="til
浏览 5提问于2021-10-21得票数 0
获取typescript错误将className应用于Box元素；奇怪的是，相同的源代码可以在具有几乎相同配置的其他开发人员的Box上工作。
使用："@material-ui/core"："4.11.3"，"typescript"："4.1.5“
tsc --版本4.1.5
/src/components/NoSearchResultsOverlay/NoSearchResultsOverlay.tsx
TypeScript error in .../client-app/src/components/NoSearchResultsOve
浏览 23提问于2021-05-19得票数 0
我在TypeScript中编写了这样一个React组件：
const SingleColumn = (image: any, heading: string, para: string) => {return(
<Col className="col-md-4 my-4">
<img src={image} alt="" className="w-100"/>
<h4 className="my-4">{heading}</h4>
<p>
浏览 3提问于2020-12-24得票数 1
回答已采纳
我正在尝试学习redux表单和typescript，但我遇到了一个我无法解决的错误。 错误是：Property 'submitAction' is missing in type '{}' but required in type 'Readonly<IDispatchProps & Partial<ConfigProps<IUser, IDispatchProps, string>>>'.ts(2741) 这就是我认为错误的地方。 //Form.tsx import * as React from
浏览 114提问于2020-04-23得票数 4
回答已采纳
我要将这个React项目从无TypeScript转换为TypeScript，我不知道我在这里做错了什么。
下面是我正在处理的组件的代码：
import React from "react";
import { useContext, useState, useEffect } from "react";
import styles from "./Search.module.css";
import { BsSearch } from "react-icons/bs";
import axios from "axios&#
浏览 1提问于2021-06-23得票数 1
我有一个使用Formik's withFormik钩子的Form。我的问题是，基于我可以显示加载器，我如何从handleSubmit函数更新加载器状态。
const [loading, setLoading] = React.useState(false);
.....
.....
<Button
className={classes.button}
type="submit"
color="primary"
variant="contained"
disabled={loading}
>
submit
浏览 6提问于2020-05-12得票数 0
我是刚接触React和TypeScript的。当有人单击按钮(FontAwesomeIcon)时，我想在表中添加一个新行。我甚至不知道从哪里开始。
这是我的密码
import React from "react";
import './SchemeFillData.scss';
import {faPlus} from "@fortawesome/free-solid-svg-icons/faPlus";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
浏览 3提问于2020-11-26得票数 0
回答已采纳
我对TypeScript相当陌生，已经收到了一个基于ES6的react项目，并且希望迁移到TypeScript以获得更完整的状态。跟在(这个)之后的任何事情。似乎出现错误(属性"foo“在”bar“类型中不存在)
import * as React from 'react';
import { Component } from 'react';
class Clock extends Component {
constructor(props: {}) {
super(props);
this.state = {
浏览 1提问于2017-10-24得票数 0
回答已采纳
我正在尝试使用TypeScript中的库来创建一个具有我自己的默认值的基本<BaseDataGrid />组件，这样当我在其他页面和其他组件中使用<ReactDataGrid />时就可以不用重复了。这是我的基本组件：
import React from "react";
import ReactDataGrid from "@inovua/reactdatagrid-enterprise";
import { TypeDataGridProps } from "@inovua/reactdatagrid-community/ty
浏览 17提问于2021-02-13得票数 1
回答已采纳
在教程https://www.sitepoint.com/how-to-migrate-a-react-app-to-typescript/中，我看到了以下JS代码： import React from 'react'
import { buttonStyles } from './Button.styles'
const Button = ({ onClick, text }) => (
<button onClick={onClick} className={buttonStyles}>
{text}
</butt
浏览 12提问于2021-02-02得票数 0
回答已采纳
在试图运行我的react应用程序时，我收到了以下错误：
D:/React/my-components/src/App.tsx TypeScript错误在D:/ function /my-components/src/App.tsx(23，4)：JSX元素类型‘确认’不是JSX元素的构造函数。类型“ElementClass”中缺少以下属性: context、setState、forceUpdate、props和其他两个。TS2605
21 | </a>
22 | </header>
23 | <Confirm />
浏览 2提问于2019-10-01得票数 7
回答已采纳
我用的是TypeScript和React和。我想替换使用内部'td‘元素呈现表格单元格的现有表呈现，如下所示：
<td className={cssClass} key={idx} onClick={handleClick}>{txt}</td>
对于使用语义-UI.React Table.Cell元素的元素，如下所示：
<Table.Cell className={cssClass} key={idx} onClick={handleClick}>{txt}</Table.Cell>
问题是强类型'onClick‘元素(其支持由
浏览 2提问于2017-01-17得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
