未在switch语句中定义react className

在React中，className是用于设置元素的CSS类名的属性。它可以用于给元素添加样式或者根据条件动态地切换样式。

在未定义switch语句中的react className的情况下，可以使用条件语句或者三元表达式来设置className属性。以下是一种可能的实现方式：

import React from 'react';

function MyComponent({ condition }) {
  let className = '';

  if (condition) {
    className = 'active';
  } else {
    className = 'inactive';
  }

  return <div className={className}>Hello, World!</div>;
}

在上述代码中，根据条件condition的值，我们动态地设置了className属性。如果condition为真，则className为'active'，否则为'inactive'。这样，根据条件的不同，元素的样式类也会相应地改变。

在React中，也可以使用三元表达式来实现相同的效果：

import React from 'react';

function MyComponent({ condition }) {
  const className = condition ? 'active' : 'inactive';

  return <div className={className}>Hello, World!</div>;
}

在这种情况下，我们使用了三元表达式来根据条件condition的值直接设置className属性。

以上是一种基本的实现方式，根据具体的需求和场景，可以根据实际情况进行调整和扩展。

关于React的更多信息和使用方法，可以参考腾讯云的React产品介绍页面：React产品介绍

未在switch语句中定义react className

、、

我使用switch语句来动态呈现一个组件。在使用className属性的任何地方，我都会收到错误消息className is not defined，并且配料将始终为null如果我删除了className属性，那么它将正常工作 import Reactfrom 'react'; import classes from 'C:/Users/oluad/Desktop/my-burger-appp/src

浏览 16提问于2020-01-12得票数 0

1回答

我得到了这个错误，我不知道为什么‘交换机’(导入为‘交换机’)没有发现‘反应-路由器-多姆’。

、、、

尽管我使用的是路由而不是开关，但它仍然显示了相同的错误，但我使用npm react router命令安装了router。代码如下import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'; return(> <div className='ap

浏览 7提问于2022-11-27得票数 -1

2回答

无法使用应用程序在react中添加类

、、

我使用create应用程序启动了一个新的react项目。我试图让选定元素的背景色发生变化，文本变得粗体，但似乎类从未添加过，不确定我做错了什么。Switch.jsimport styles from '.state } <div onClick={props.o

浏览 2提问于2018-09-11得票数 0

回答已采纳

1回答

React Router，删除某些路由中的导航/侧栏

、

我是react的新手，我的react应用程序在每条路线上都有一个侧边栏。我想创建一个独立于侧边栏的登录页面。我查看了其他答案，但似乎找不到有效的解决方案。

浏览 1提问于2019-11-20得票数 0

2回答

使用switch语句进行react呈现

、

" className="row"> {>}render() { <React.Fragment><div id="call_notes_app&quo

浏览 4提问于2018-04-12得票数 3

回答已采纳

2回答

在react-router上链接后，组件不会重新呈现

、、

按照计划，当用户选择下拉菜单中的项目时，react-router将更改URL并生成重新渲染页面。我在最后一阶段犯了一个错误。URL更改，但页面未重新渲染

浏览 0提问于2020-11-27得票数 0

1回答

获取后链接到不同的URL

、、

它在提交页面上。用户按下Submit按钮。如果请求成功，将转到产品页面。如果不是，它将停留在当前提交页面上。 fetch(post request) .then(submit => <Link to={"/product" /> this.setState({error: Sub

浏览 0提问于2018-11-28得票数 0

2回答

我的反应路由器链接不起作用。它显示浏览器中的url更改，但内容没有显示

、、

from 'react'; import { BrowserRouter as Router, Switch, Route,from 'react';import { BrowserRouter as Router, Switch, Route, Linkfrom

浏览 0提问于2018-04-02得票数 0

回答已采纳

2回答

响应路由器更改url，但不更新上下文。

、、、、

用户可以通过单击按钮切换到西班牙语。当用户单击按钮以切换到西班牙语时，将调用history.push()函数。它用给定的国家代码更新URL，在这种情况下，URL变成localhost:3000/es。当单击浏览器返回按钮时，URL将更改为localhost:3000，但视图仍然使用西班牙语。, Switch } from 'react-router-dom'; import App from '.ReactDOM.render(appRoutes, documen

浏览 5提问于2019-12-27得票数 1

2回答

React路由器中的"React不识别DOM元素上的支柱“

、

React不识别DOM元素上的computedMatch支柱。如果您有意地希望它作为自定义属性出现在DOM中，则将其拼写为小写computedmatch。以下是有关的守则：import { Switch,} from "react-router-dom"; import ".<

浏览 1提问于2019-10-19得票数 0

3回答

React路由器Dom v5嵌套路由不起作用

、

import React from 'react' BrowserRouter as Router, Route return ( <main className="main-containerimport

浏览 2提问于2020-08-09得票数 0

2回答

如何将React属性传递给CSS

、、

我现在有了这样的东西<Switch style={{ backgroundColor: mainColor }}/>但它设置了这两个状态的颜色，我希望这个开关在关闭位置时变成'defaultColor

浏览 4提问于2017-07-03得票数 4

2回答

React ()正在重新呈现，但动态值不反映在屏幕上。

、、、

="container CheckForms"> <hr /> <div className="row justify-content-center"> <div

浏览 0提问于2020-06-13得票数 0

回答已采纳

1回答

在React类组件中未定义“”class“”

、、

因此，我有一个使用'React.Children.map()‘的无状态组件，我想把它变成一个类组件来添加一个状态，但是因为我不能(据我所知)将{children}作为一个属性传递，所以我得到的错误是没有定义我如何定义孩子呢？原始无状态组件： import React from 'react'; <div className="tabsPanel" onCl

浏览 12提问于2019-04-15得票数 1

回答已采纳

2回答

使用props.children在React中转换

、、

p><p key='footer'><Footer</p>在Dialog.js中return( <div className

浏览 7提问于2018-02-05得票数 0

1回答

在reactjs中有条件地向组件传递道具

、

我在react的render的return中有这个Paper组件。我只想在有条件的情况下传递onScroll。<Paper className={classes.root} onScroll={this.loadMoreClasses}><Paper className={classes.rootonScroll={this.loadMoreClasses} :null> 希望仅当组织名称未在其中定义时才发生onScroll

浏览 1提问于2019-01-05得票数 0

1回答

React重定向导致错误:超过最大更新深度

、、

Login page:import { IonContent, IonGrid, IonRow, IonCol, IonItem, IonLabel, IonButton, IonInput} from '@ionic/react'import '(this.state.msg):

浏览 14提问于2019-05-03得票数 1

1回答

在“形式”的支柱中找不到的属性

、

我知道道具不见了，但我似乎找不到定义它们的地方。onSubmit**.Flow: property属性未在React元素** form的道具中找到 _; const formText = FORM_TEXT[user.langua

浏览 1提问于2017-07-31得票数 0

回答已采纳

1回答

在单独的组件中定义路由-反应性

、、、

我在我的app.js中定义了如下的路由import React, { Component } from "react"; <Navbar /> <div className="container-fluid" style={styles.noPadding}>

浏览 0提问于2019-02-23得票数 0

回答已采纳

2回答

让MenuItem在NavDropdown中有一个链接

、、、

我试过稍微调整一下，这就是我到目前为止所得到的：import { Nav, NavDropdown, MenuItemfrom "react"; import { BrowserRouter, Route, Switch, Redirect } fromimport AdminLayout f

浏览 0提问于2019-08-07得票数 0

回答已采纳

点击加载更多