在React JSX中的div之间切换
是指在React组件中根据条件渲染不同的内容。这可以通过使用条件语句或三元表达式来实现。
一种常见的方法是使用条件语句，例如if语句或switch语句。根据条件的不同，可以在div之间切换渲染的内容。以下是一个示例：
function MyComponent({ isLoggedIn }) {
if (isLoggedIn) {
return (
<div>
<h1>Welcome, User!</h1>
<button>Logout</button>
</div>
);
} else {
return (
<div>
<h1>Please log in</h1>
<button>Login</button>
</div>
);
}
}在上面的示例中，根据isLoggedIn的值，渲染不同的内容。
另一种方法是使用三元表达式，它可以更简洁地实现条件渲染。以下是使用三元表达式的示例：
function MyComponent({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? (
<div>
<h1>Welcome, User!</h1>
<button>Logout</button>
</div>
) : (
<div>
<h1>Please log in</h1>
<button>Login</button>
</div>
)}
</div>
);
}在上面的示例中，三元表达式根据isLoggedIn的值选择要渲染的内容。
这种在React JSX中的div之间切换的技术可以用于创建动态的用户界面，根据不同的条件显示不同的内容。例如，可以根据用户的登录状态显示不同的导航栏、不同的用户信息等。
腾讯云提供了一系列与React开发相关的产品和服务，例如云服务器、云数据库、云存储等。您可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
2回答
我有一个问题，我的路由使用的反应路由器-多玛是显示所有的路线在一次。因此，当我呈现我的和包含路由的start时，我看到的是每个路由的页面。看起来是这样的：
首先，这是我的index.jsx，它在页面上呈现应用程序组件：
// Dependencies
import React from 'react';
import ReactDOM from 'react-dom';
// Components
import App from './components/app.jsx';
// Styles
import './inde
浏览 3提问于2017-06-04得票数 4
回答已采纳
1回答
我基本上已经从文档中直接复制了代码，并且它抛出了一个奇怪的错误。
Warning: Failed prop type: The prop `history` is marked as required in
`Router`, but its value is `undefined`.
in Router
这是我的代码：
client/main.jsx
import React from "react"
import { render } from "react-dom"
import { Meteor } from "meteor
浏览 0提问于2017-03-15得票数 1
回答已采纳
(使用浏览器中的)当从普通的javascript调用react组件时，我得到了一个未显示的ReferenceError。
我试图从我的javascript应用程序中调用一个React.js (0.12.2)组件。我有一个JQuery document.ready处理程序可以这样做。
它接缝，在浏览器中的JSX编译器需要一段时间才能准备好使用react的组件。
在这种情况下，Document.ready可能不是一种选择。
见下面的例子：
index.html：
<!DOCTYPE html>
<html>
<head lang="en">
浏览 3提问于2015-02-22得票数 5
回答已采纳
1回答
我正在尝试创建一个组件，它接受一个子道具，当这个子道具发生变化时，我想要旧的组件，即子道具在屏幕外动画，而新的组件在屏幕上动画。我尝试使用react使用下面的代码来实现这一点，您可以在这里运行它。
我在这里错过了什么？组件不应该在卸载时向左移动，在挂载时从右侧进入吗？
/** @jsx jsx */
import { useState } from "react";
import { useTransition, animated } from "react-spring";
import { jsx } from "@emotion/core"
浏览 3提问于2022-09-02得票数 0
所以我试图用Reactjs构建一个完整的页面，但一些组件在整个页面中都是持久的。其结构类似于：
<div>
{showHeader ? header : ''}
{showNav ? nav : ''}
<div className="main">
<section className="left">
{this.props.children}
</section>
<section className="right>
浏览 3提问于2014-08-06得票数 1
我正试图让我的反应应用程序正确地呈现出一种ascii艺术。
在执行jsx转换器之后，我的艺术就松开了格式，并在浏览器中呈现出相当奇怪的内容。
我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"><
浏览 8提问于2015-08-24得票数 6
回答已采纳
在vscode中，react类组件(crl + /)将为JSX创建正确的注释 {/* comment */} 但在vscode中，react函数组件(crl + /)将为JSX创建不正确的注释 // comment 如何在vscode中修复此问题？ ?
浏览 152提问于2020-04-05得票数 0
回答已采纳
2回答
未定义反应
、、、
我刚开始玩，但我似乎遇到了一些问题。在下面的代码中，每当我被路由到react示例页面时，我注意到在浏览器开发人员控制台中，它会说"React是未定义的“。它指的是这一行：
变量react_example = React.createClass({
它位于react_example.js.jsx文件中(参见下面)。
Gemfile
#... as well as other gems...
gem 'nokogiri'
gem 'react-rails' #<------ React
gem 'less-rails'
gem '
浏览 2提问于2014-07-26得票数 5
回答已采纳
1回答
我读过同样的问题，但这对我来说是行不通的。
index.html
<body>
<h1>Index</h1>
<div id="app"></div>
</body>
client/app.jsx
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-route
浏览 0提问于2016-05-07得票数 2
回答已采纳
尝试在我的应用程序中使用BrowserRouter，不确定哪里出错了，但我认为可能与我的webpack有关。最终，我可以在第一次呈现时使用path='/‘时的任何组件。一旦我尝试使用不同的路径，比如path='/contact‘，我就会得到一个404错误。 Webpack.config.js - const path = require('path');
module.exports = {
mode: 'development',
entry: { app: './src/App.jsx' },
ou
浏览 16提问于2020-10-12得票数 1
1回答
我试图在另一个类中显示一个作为属性存储的类。
以下是主要的上层阶级：
updatable_number.jsx
import React, { Component } from 'react';
import SimpleNumber from "./simple_number.jsx"
import SimpleNumberUpdater from "./simple_number_updater.jsx"
export default class UpdatableNumber extends Component {
constru
浏览 0提问于2019-02-18得票数 0
我有一个名为separatefile.jsx的文件，在这个文件中，父组件名是内容，子组件名是子组件名。
separatefile.jsx
import React from 'react';
import Parent from './learning.jsx';
class Content extends React.Component {
constructor() {
super();
this.state = {
finding : 'i am finding'
}
}
render(
浏览 13提问于2016-08-23得票数 1
回答已采纳
2回答
我使用这个jsx脚本在我的index.html文件中呈现应用程序组件。
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require ('react-router').Router;
var Route = require ('react-router').Route;
var IndexRoute = require ('react-router').I
浏览 2提问于2017-05-17得票数 0
下面是我要创建的用户函数:1)用户双击文本2。)文本变成输入字段，用户可以在其中编辑文本3。)用户点击进入，并在提交时更新文本以编辑文本。基本上，它只是一个编辑功能，用户可以在其中更改特定的文本块。
这就是我的问题--我可以双击将文本转换为输入字段，但是如何提交和呈现编辑的文本呢？
我的父组件App.js存储用于更新App.js (updateHandler)的函数。更新的信息需要从处理文本输入的Tasks.jsx组件中传递。我还应该指出，一些道具正在通过TaskList发送到任务中。守则如下：
App.js
import React, {useState} from 'react&#
浏览 6提问于2020-07-06得票数 5
回答已采纳
顺便说一句，我已经做了很多研究来解决这个问题；到目前为止，我仍然停留在这个问题上：
这是file1.jsx中的第一个组件
import * as React from 'react';
export default function MenuPopupState(props){
const [career, setCareer] = React.useState('');
return (
<div>
<button onClick={() => { setCareer(care
浏览 4提问于2021-12-30得票数 1
回答已采纳
在我的node.js应用程序中，我使用react.js作为模板库。我正在为我的react组件使用jsx语法。我有一个像/entities这样的路径来呈现entities.jsx文件(它是一个视图)。我的entities.jsx文件中有以下代码。我试图在我的代码中调用onclick处理程序，但它不工作。我没有使用React.render显式呈现它，但当我点击localhost:/entities时，组件在浏览器中显示，但onclick处理程序没有触发。
var MyComponent = React.createClass({
alertMessage: function() {
浏览 1提问于2016-04-18得票数 0
2回答
我不熟悉编码我想要在AddWord.jsx中显示我的Form.jsx Form.jsx是一个表单Addword.jsx是Addword.js中的一个按钮单击我必须显示Form.jsx帮助我
//This is my code
import React from 'react'
import App from '../App'
import Form from './Form'
function AddWords() {
return (
<div>
<button type=
浏览 0提问于2019-11-24得票数 0
我正在为我的react项目进行身份验证，我当前的文件结构如下所示
-components
-auth
AuthContainer.jsx
ForgotWidget.jsx
LoginWidget.jsx
SignUpWidget.jsx
然后，我通过<LoginWidget />调用我的头文件中的组件
将所有这些组合在一起的最佳实践是什么，这样我就可以直接调用它，而不是分别调用每个人？
浏览 1提问于2016-12-07得票数 0
我创建了三个基本组件。
A呈现两个组件B和C就像标头一样，制表符1、2、3 C是第一页，其中有两种形式，一次显示一页。在显示第一个表格时，我需要在B组件中显示制表符1。在显示第二种形式时，我需要在B组件中显示选项卡3。
我只想把C组件的数据传递给B组件。
我将状态放在C组件上，并试图在B控制器中使用相同的this.state.data或this.props.data来实现没有值。
A.jsx
import React from 'react';
import B from './B.jsx';
import C from './C.jsx'
cl
浏览 2提问于2017-01-16得票数 6
我是React.js新手，我想使用.jsx文件进行开发。我已经安装了react工具，并运行了下面的命令，就像文档中提到的那样。
jsx --watch src/ build/
观察者正在运行并注意到我在.jsx文件中的更改。但是，它不生成任何.js文件。
我收到以下输出：
[]
app.jsx changed; rebuilding...
[]
app.jsx___jb_bak___ changed; rebuilding...
app.jsx___jb_bak___ changed; rebuilding...
app.jsx changed; rebuilding...
命令行是在管理权限
浏览 8提问于2015-09-17得票数 0
回答已采纳
我对ReactJ很陌生，我正在开发一个社交媒体网络应用程序。这里我有一个模板，我必须实现一个三点多选项菜单。我尝试使用引导菜单和反应启动组件菜单。两个人都不适合我。在不使用库的情况下实现此特性的最佳方法是什么？
我做了直到切换菜单。但是在点击时，所有的菜单都会切换。我不能单独进行切换。
下面是我做的代码：
post.jsx
class UserPost extends Component {
state = {
overFlowMenuActive: false
};
toggleOverflowMenu = () => {
t
浏览 0提问于2019-08-13得票数 3
回答已采纳
你好啊，斯塔克弗莱，
我开始我的第一个材料-UI项目与ReactJS。
它有AppBar和抽屉工作(抽屉只从左蜂鸣到右侧滑动)。
现在我想让AppBar onLeftIconButtonTouchTap打开抽屉。
这是我当前用于AppBar.jsx文件的代码：
import React from 'react';
import AppBar from 'material-ui/AppBar';
import DrawerLeft from './DrawerLeft.jsx';
function handleTouchTap() {
浏览 1提问于2016-05-17得票数 2
回答已采纳
2回答
我试图从另一个组件中调用一个组件来显示一些html，如果我单独调用该组件，它就会工作，但是如果我在同一个返回函数中添加了更多的标记，它会引发以下错误：
Adjacent JSX elements must be wrapped in an enclosing tag (9:12) while parsing file
Product.jsx
var React = require('react');
var Product = React.createClass({
render: function() {
return (<p>Produ
浏览 9提问于2016-06-01得票数 4
回答已采纳
我对reactjs很陌生，我正在项目中使用它。我使用以下语法在a.jsx和b.jsx中分别定义了组件A和B：
//a.jsx
'use babel';
import React from 'react';
export class A extends React.Component {
render() {
return (
<div>some text</div>
);
}
}
//b.jsx
'use babel';
浏览 0提问于2015-12-07得票数 3
回答已采纳
1回答
我有一个页脚，它有三个元素，我想水平分布它们。我尝试使用flex和space-between在水平方向上对它们进行分隔。下面是我的react组件：
import React from "react";
export default function Footer()
{
const Element1 = "GZB Automation";
const today = new Date();
const DayFormat = today.toString().split(" ").slice(0,4);
cons
浏览 0提问于2020-08-09得票数 1
我正在尝试从react迁移-选择v4到v5。所讨论的表单/字段与v4一起工作，同时将统一用于返回示例输出的表单，如：
{
"skill": {
"value": "skill1",
"label": "Skill 1"
}
}
当我尝试使用V5时，我得到了一个空对象。
通过react select ，我相信感兴趣的部分是他们现在使用forwardRef而不是ref？
有一个表单页面，它使用“下拉”组件，这就是我使用react select的地方。
// FormPage.jsx (simpl
浏览 9提问于2022-03-03得票数 0
1回答
目前，我可以使用我的导航栏(TopPane组件)使用react路由器版本3.0.5从一个页面转到另一个页面。我想要做的是，如果单击顶部窗格中的某个内容，则路由将呈现到中心组件，而不是整个页面。我的等级制度是这样的。
应用程序-左窗格-顶部窗格-中间窗格
我的routes.js是：
import React from 'react';
import { Router, Route, browserHistory } from 'react-router';
import App from './components/App.jsx';
imp
浏览 1提问于2017-05-12得票数 1
回答已采纳
我将4页的内容组件存储在一个数组中。我希望在单击next按钮(在页脚组件中)之后，页面布局将呈现数组中的下一个内容组件，有人对此有什么想法吗？
非常感谢！这是我的档案
**** Content.jsx ****
import React from 'react';
import Start from './Start.jsx';
import Time from './Time.jsx';
import Information from './Information.jsx';
import End from './En
浏览 2提问于2016-07-02得票数 0
回答已采纳
大家好，我是reactjs的新手，我在使用bootstrap navbar实现路由时遇到了一些困难。下面是我为我的示例react应用程序创建的页面。好心的人请帮助我如何修改路由文件，以便我可以轻松路由与其他菜单选项在导航栏。
Index.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var Route = require('./config/routes');
var Navbar = require('./navBar');
Rea
浏览 14提问于2017-02-14得票数 3
我创建了两个名为client和admin-client的React应用程序，它们都使用create-react-app。
在admin-client中，我希望重用client中已经存在的一些组件，以避免代码重复。
例如，我在client/src/components/目录中有一个client/src/components/文件，我想在admin-client中重用该文件，如下所示：
import React from 'react';
function Header() {
return (
<header>
<
浏览 0提问于2019-06-15得票数 5
回答已采纳
我在App类中创建了一个登录函数，但返回给我的是代码必须“在使用Jsx时锁定在作用域中”。我相信scope会将html翻译成jsx。但我想知道:有一种方法可以让我放弃这个选择吗？可以不需要使用Jsx就可以使用Html吗？我不太喜欢Jsx。
这是我的app.js文件：
import { BrowserRouter, Routes, Route } from "react-router-dom";
import React from "react";
import {AiOutlineLock} from 'react-icons/ai';
impo
浏览 12提问于2022-10-23得票数 -2
1回答
我使用客户端呈现，并面临以下问题。
我有两个组件位于两个不同的文件中
DefinitionNode
class DefinitionNode extends BaseNode{
render() {
return (
<div></div>
);
}
}
BaseNode
class BaseNode extends React.Component{
render() {
return (
<div></div>
);
}
}
<script src="
浏览 2提问于2015-11-13得票数 0
回答已采纳
我有一个路由的App.jsx，我有一个组件登录，应该指向下一页，一旦它被点击。我的问题是:我如何告诉服务器登录按钮被点击了，现在它必须转到网页？ App.jsx包含两个链接: 1.注册2.登录 这是我的App.jsx import React from "react";
import { Login, Register } from "./components/index";
class App extends React.Component {
constructor(props) {
super(props);
this.state
浏览 27提问于2019-06-21得票数 0
在React Router 3.0.5中，站点工作正常，但当我尝试更新到React Router 4.1.1时，我得到了一些错误。我尝试将主路由设置为"/“，否则它将转到列出的其他组件。
我得到一个错误: Warning: Failed prop type:这个prop类型在Router中被标记为required，但它的值是undefined。在路由器中
和这个错误: Router.js:31未捕获位置:无法读取未定义的属性‘TypeError’
下面是我的代码App.jsx：
import React from 'react';
import LeftPane f
浏览 2提问于2017-05-21得票数 0
我在CSS文件和导入它们方面有一个奇怪的问题。我有一堆带有我的react组件的.jsx文件，每个文件都有单独的.css文件来进行样式设计。问题是，在某些情况下，当我在一些ex_file.jsx中这样做时
import './ex_file.css';
import React from 'react';
然后尝试使用导入的类。
<div className="example-class">
Some text
</div>
得到应用的类不是来自在.css文件顶部导入的.jsx文件。这是预期的行为吗？据我在谷歌上搜索的资
浏览 1提问于2021-01-10得票数 0
回答已采纳
我是React的初学者。我在一个JSX文件中创建了一个通用React组件，然后打算将其导入到另一个JSX文件中。但是，当我导入时，返回以下错误ReferenceError: require is not defined。
这是我的一般对象：
class Footer extends React.Component{
render(){
return (
<div>Footer</div>
);
}
}
export default Footer;
这是另一个JSX文件：
import Footer
浏览 20提问于2017-12-21得票数 2
不过，在用构建的一个相当典型的应用程序中，还没有成功运行这个程序--奇怪的是，这个程序只通过了一次，然后在CI中重新安装了节点模块之后就失败了。所以我一定在附近。
内部错误消息状态
找到了重复的__self道具。您最可能使用的是不推荐的转换-react jsx-self Babel插件。使用自动运行时，__source和__self都会自动设置。请从您的Babel配置中移除transform-react jsx源和transform-react jsx-self。
我没有显式地在任何地方使用transform-react-jsx-source或transform-react-jsx-s
浏览 6提问于2020-12-15得票数 1
这很难解释，但是假设我在顶部有一个包含所有主要链接的导航栏。我点击顶部导航栏中的models链接，它将呈现下方的models页面。models页面包含不同模型的缩略图。我如何获取它，以便单击该模型的缩略图，使我能够加载该用户的组件，而不是模型页面？
这是我到目前为止所掌握的。顺便说一下，我使用的是React-router 3.0.5
App.jsx：
import React from 'react';
import LeftPane from './LeftPane.jsx';
import RightPane from './RightPane.js
浏览 0提问于2017-05-24得票数 1
1回答
我的盖茨比网站的翻译有问题。
我正在使用i18n插件进行翻译，但是如果我在index.jsx中添加了两个FormattedMessage标签，它就会破坏我的index.jsx。
我可以在谷歌找到我的问题，但我不知道如何解决它。
我的index.jsx
import React from 'react'
import { FormattedMessage } from 'react-intl'
import Layout from '../components/Layout'
const IndexPage = ({ pathContext:
浏览 0提问于2018-12-17得票数 2
回答已采纳
1回答
我从Rails开发测试项目并做出反应。
我有反应的根成分：
# chat_app.js.jsx.coffee
###* @jsx React.DOM ###
@ChatApp = React.createClass
displayName: 'chatApp'
render: ->
return (
`<div className="chatApp">
<h1>React Chat App Example</h1>
<div class=
浏览 2提问于2014-08-26得票数 2
回答已采纳
假设在我的第一个文件open.jsx中，我有：
// Default Import Statements here
var open = React.createClass({
render() {
return (
<div>
<Dialog
title="Test"
ref="openDialog">
</Dialog>
</div>
);
},
_handleTouchTap
浏览 1提问于2015-12-28得票数 2
在使用类型记录和React时，我们必须在jsx文件中在compilerOptions中指定tsconfig.json。
它有preserve，react，react-native，react-jsx等作为允许值。
{
"compilerOptions": {
"jsx": "react-jsx" | "react" | "react-native" | "preserve"
}
}
react和react-jsx主要用于web，我想了解这两个选项之间的区别，以及选择什么时候。
rea
浏览 4提问于2021-05-31得票数 21
我试着对翻译进行存根/监视，而不仅仅是嘲笑它，即使在这种最基本的情况下，我似乎也无法让它触发。
/**
* ComponentName.jsx
*/
import { useTranslation } from "react-i18next";
export default function ComponentName() {
const { t } = useTranslation();
return <div>t(`index:path`)</div>
}
/**
* ComponentName.test.jsx
*/
im
浏览 2提问于2020-09-23得票数 4
2回答
使用Meteor 1.2.0.1并作出反应。我的简单应用程序很好用，但现在我需要。
应用程序布局：
client\
app.jsx
lib\
router.jsx
server
views\
home.jsx
layout.jsx
home.jsx:
Home = React.createClass({
render() {
return (
<div>
<h3>Hello World</h3>
<p>from home</p>
</div>
浏览 3提问于2015-09-25得票数 3
回答已采纳
index.jsx import React from "react";
import ReactDOM from "react-dom";
import { Route, Router, Switch } from "react-router-dom";
import App from "./components/App.jsx";
import SearchResults from "./components/SearchResults.jsx";
import history from "./his
浏览 19提问于2020-08-14得票数 1
回答已采纳
2回答
删除`␍‘更漂亮/更漂亮
、、、、
在你捣碎重复按钮之前，我知道有更多的文章是关于同样的问题，我已经尝试了解决办法，但没有任何效果(请看我的帖子的最后一部分)。
我使用的是Reactive17.0.2、ESLint 8.5.0和更漂亮的2.5.1，几乎每个js文件都有以下错误。
Delete `␍`eslintprettier/prettier
这就是它看起来的样子
这是我的.eslintrc.json：
{
"env": {
"browser": true,
"es2021": true
},
"exten
浏览 10提问于2021-12-24得票数 7
回答已采纳
./src/components/Login.jsx第30行:在使用JSX react/react-Login.jsx范围第31行时，“react”必须在作用域内；在使用JSX react/react时，“react”必须在范围内；在使用JSX react/react时，“react”必须在作用域内- JSX -范围行33:当使用JSX react/react时，“react”必须在范围内--在-JSX范围第34行：'React‘必须在使用JSX react/react时在范围内。
我是login.jsx
import { Cancel, Room } from "@m
浏览 2提问于2022-06-06得票数 -2
我刚刚开始学习ReactJS，我正在尝试用一个ASP.NET MVC应用程序来设置它，我只想创建一个示例应用程序。
我安装了node版本v8.12.0和npm版本6.10.3
创建了一个空的MVC5应用程序，在名为Scripts的文件夹中创建了一个新文件夹Jsx。
在Jsx文件夹中，我创建了Tutorial.jsx文件。
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
浏览 1提问于2019-08-20得票数 1
我有这样的错误：./src/page/Freelances/index.jsx找不到文件：'index.jsx‘与磁盘上的相应名称不匹配：’.src\Components\Card\Components‘。我很荣幸地不明白为什么。
我的代码是：
import Card from '../../components/Card'
import styled from 'styled-components'
import colors from '../../utils/style/colors'
import React from '
浏览 0提问于2022-04-28得票数 2
回答已采纳
我正在学习反应，所以这个问题可能没有任何意义，但我想学习它。
我有index.html页面，我想跳转到Components.html页面。
RouteToComponent.jsx
import React from 'react';
class RouteToComponents extends React.Component {
render() {
return (
<div>
<a href="Components/Components.html">
浏览 3提问于2020-04-11得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
