为什么不能在JSX中传递数字
在JSX中不能直接传递数字，原因如下：
JSX是一种JavaScript语法扩展，用于编写React组件的结构化代码。在JSX中，我们需要使用大括号{}来包裹JavaScript表达式，以便在组件中动态渲染内容。然而，JSX对于不同类型的值有不同的处理方式。
当我们直接将一个数字传递给JSX时，JSX会将其视为原始文本而不是JavaScript表达式。这意味着传递一个数字将被解析为字符串，而不是数字类型。
例如，当我们尝试传递一个数字10到组件中时，JSX会将其解析为字符串"10"，而不是真正的数字类型。这可能导致一些潜在的问题，尤其是在进行算术运算或与其他数字进行比较时。
为了避免这个问题，我们需要将数字包裹在大括号{}中，以确保JSX正确解析它们为JavaScript表达式。例如，可以使用大括号将数字传递给组件：{10}。
总结一下，不能在JSX中直接传递数字，因为JSX会将其解析为字符串而不是JavaScript表达式。为了在JSX中传递数字，我们需要将其包裹在大括号{}中作为JavaScript表达式。
相关·内容
我是新的反应和实验的东西，但出现了这个问题，当我调用一个对象在另一个文件，我继承这些值等，它只是使一个新的对象，把原来的对象放入新的对象。它可能被解释得一团糟，但我会用一些例子来说明。有人能给我解释一下这是怎么回事吗？
，这是基本文件。第十条路径是发生这种情况的路径，您可以看到，我希望将这些项交给该文件。，当您在这里记录这些项目时，结果是条目{.}(我想要的)。
import React, { Component } from "react";
import "./App.css";
import Home from "./components/Home
浏览 1提问于2019-02-27得票数 0
回答已采纳
2回答
在我做反应js的时候有个疑问。在下面的代码中，我使用了js和jsx。两人的反应都是一样的。那么我们为什么要特别使用jsx。
当我在网上搜索时，我只能得到js和jsx之间的区别，但我也需要知道jsx是专门为react构建的，还是我们可以在react项目之外运行jsx。
App.js
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Lay
浏览 14提问于2022-05-23得票数 0
回答已采纳
在继续之前，我应该提到，是的，我已经阅读了关于"“及其不同变体的问答。
然而，这些帖子更多的是关于如何在不使用JSX语句的情况下四处走动。我想知道为什么在JSX中不允许声明，因为我找不到任何文章。
我正在阅读关于这个叫做"“的官方文件，并给出了为什么，引用，
JSX只是函数调用和对象构造的语法糖。
他们接着对比了以下两段代码，第一段有效，第二段不起作用：
这是有效的：
// This JSX:
ReactDOM.render(<div id="msg">Hello World!</div>, mountNode);
// Is
浏览 4提问于2020-04-02得票数 6
回答已采纳
3回答
使用包含特定和Redux的流
、、、、
我正面临流类型方面的问题。下面是代码，简化为相关部分：
/* @flow */
import * as React from 'react';
import { connect } from 'react-redux'
export type InjectedProps = {||};
type StateProps = {||};
type DispatchProps = {||};
type OwnProps = {||};
type ReduxProps = {|
...OwnProps,
...StateProps,
...Dispatch
浏览 2提问于2019-09-05得票数 2
在学习HTML事件处理程序和React的过程中，我理解了在HTML中，事件处理程序的值，例如一个函数，后面应该有圆括号。据我所知，JSX元素是在React中编写类似于元素的html的另一种方式，但是当我们编写这些元素时，我们应该省略括号，我不明白为什么？如果它们表示类似HTML的元素，那么它们的行为不应该是一样的吗？
<button onClick={shoot}>JSX element!</button>
<button onclick="shoot()">HTML element!</button>
浏览 0提问于2020-11-21得票数 1
我首先用“创建-反应-应用程序”初始化了一个react应用程序，然后用yarn add typescript @types/node @types/react @types/react-dom @types/jest添加了类型记录，我用默认值初始化了tsconfig.json：
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"allowJs": true,
"jsx": &#
浏览 4提问于2021-05-13得票数 2
回答已采纳
在写react代码的同时在jsx中编写if-else是行不通的。
<div id={if (condition) { 'msg' }}>Hello World!</div>
然而，使用三元操作符是有效的。
<div id={condition ? 'msg' : null}>Hello World!</div>
为什么会发生这种事？
浏览 2提问于2016-08-23得票数 6
回答已采纳
我的React项目的单元测试在本地完全通过，但在Jenkins上失败。我在Jenkins上收到以下错误消息：
Error: Cannot find module '../../../../src/components/Sidebar/MenuList.jsx'
该文件确实存在，并被导入到我的测试文件中，如下所示：
import { MenuList } from '../../../../src/components/Sidebar/MenuList.jsx';
并导出到我的MenuList.jsx文件中：
export class MenuList exten
浏览 39提问于2017-12-21得票数 1
回答已采纳
所以我对react js非常陌生。我正在创建一个博客应用程序。我将博客数据存储在状态中，并将其传递给子组件。在下面的代码片段中，我有Feed组件，我从json中获取数据并将其存储在状态中。我通过道具将数据传递给子组件Feed。现在我有了一个文章组件，它是作为模式打开的Feed的子组件。然而，问题是，无论我点击哪个Feed，它都会打开同一篇文章(无论最后选择哪个)。 Feeds.jsx import React, { Component } from "react";
import axios from "axios";
import Feed from
浏览 19提问于2019-06-07得票数 0
所有的路由都是在我的app.js中完成的。然而，在我的路线上，我收到了多个相同的错误-我没有通过我的应用程序的这部分道具，所以我不知道为什么我收到这个。
我收到的错误
[1] ./src/App.js
[1] Line 70:36: No duplicate props allowed react/jsx-no-duplicate-props
[1] Line 71:31: No duplicate props allowed react/jsx-no-duplicate-props
[1] Line 72:39: No duplicate props allowe
浏览 5提问于2020-01-27得票数 3
回答已采纳
我刚开始学习web，我对ReactJS中的这一点感到有点困惑。在我的App的呈现函数中，如果我返回的JSX没有一个总体的div：
render() {
return (
<h1 style={headerStyle}>Todo List</h1>
<Todo todos={this.state.todos}/>
);
}
我收到一个错误：
./src/App.js
Line 29:9: Parsing error: Adjacent JSX elements must be wrapped in an enclosing ta
浏览 3提问于2020-02-20得票数 1
回答已采纳
82回答
内循环反应JSX
、、
我试图在React中执行如下操作(其中ObjectRow是一个单独的组件)：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我了解并理解为什么这不是有效的JSX，因为JSX映射到函数调用。但是，由于来自于模板land，并且是JSX的新成员，我不确定如何实现上述目标(多次添加组件)。
浏览 33提问于2014-04-05得票数 1852
回答已采纳
实际上，我有两个问题要问这样的问题：jsx文件： ()} /> 为什么要添加道具一点也不？ 在像这样的例子中此it应该看起来像，但我们也可以看到像这样的变体this：render={({ match }) => } 我们需要扩展运算符部分吗？{...props}，当组件使用多个参数时？ 为什么..。是否需要Typescript？ 对于我在顶部的代码，我在以下位置得到一个TypeScript错误：对象 '...' expected.ts(1005) 有没有什么方法可以使用Object.assign，因为Safari 9不支持对象的扩展运算符？
浏览 19提问于2021-02-25得票数 0
回答已采纳
1回答
在反应部件之间通过道具
、、、、
我正在努力学习如何将事情分解为更小的组件，并决定从Rows.jsx的以下代码开始。我认为我的问题是理解道具如何在父/子组件之间传递。我读过许多指南和文章，但我很困惑我是否正确地使用了import。还是我应该对处理程序进行组件化？如果我做得对还是做错了，请帮我理解一下。
Rows.jsx；(以前在DynamicTable.jsx末尾)
import React, { Component } from 'react';
function RenderRows () {
render() {
var context = this; //modify this
浏览 4提问于2022-06-05得票数 0
5回答
在组件之间传递数据时出错
、、、
我试图将一个值从一个组件-- Counters.jsx传递给Counter.jsx。当我转到开发人员控制台并执行日志时，我可以从: this.props.value获取数据，但当我尝试将其设置为状态时，我得到以下错误: TypeError: Cannot read property 'value‘of undefined。
// This is the component: Counters
import React, { Component } from "react";
import Counter from "./counter";
class
浏览 0提问于2019-06-26得票数 1
我的组件( MyPost.jsx )需要来自index.js的数组槽道具，它通过所有组件index.js -> App.js->Profile.jsx->MyPost.jsx。
所以道具是Post_postsData.Post_postsData.Profile_postsData.App_postsData => => let post =
为什么我需要双重调用Post_postData来获取对象数组？
浏览 4提问于2022-10-12得票数 3
回答已采纳
4回答
又称模板文字，字符串内插。()
它们为什么有用？
我什么时候不该用它们？
这些特性与使用带有React的JSX有何相似和不同之处？
正如wiki底部提到的那样，我如何有效地使用？
浏览 2提问于2015-05-30得票数 3
回答已采纳
我为什么要收到这个警告？
警告没有重复的道具允许反应/jsx-不重复-道具#
它显示的是第28号线，但没有任何道具正在使用。
浏览 12提问于2017-02-21得票数 35
回答已采纳
2回答
我动态创建了JSX，有一个元素动态地获得了它的ID：
{props.types[2].map((element, index) => {
return (
<tr key={index}>
<td className="align-middle">
{element.Type &&
commonFuctions.splitCapitalLetterString(element
浏览 0提问于2020-02-13得票数 0
我想从子组件中设置父组件的状态。我试着使用道具，但是它给错误Uncaught TypeError: this.props.setTopicClicked is not a function。是否有更有效的方法来设置父组件的状态而不是使用道具？我想设置isTopicClicked: true的状态
main-controller.jsx
import {React, ReactDOM} from '../../../build/react';
import SelectedTopicPage from '../selected-topic-page.jsx';
浏览 4提问于2016-02-09得票数 0
回答已采纳
假设在我的第一个文件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
在我的App.jsx中，我希望能够将一个单独的狗作为一个支柱传递给DogDetails组件。
我现在拥有的是works..however -- DogDetails组件显然包含整个狗数组作为支柱，只包含路径中:id的狗将更有意义。
下面的教程是使用一个较旧版本的was路由器，他们的方法是在他们的App.js render()中实现这一点。
render() {
const getDog = props => {
let name = props.match.params.name;
let currentDog = this.props.dogs.find(
浏览 3提问于2022-11-19得票数 0
1回答
我试图将一个无状态组件导入到我的应用程序中，并得到以下错误：
App.jsx:13未登录错误:找不到模块"./components/test“
和
模块未找到:错误:无法解决'./components/test‘
这是我的代码：
App.jsx
import React, {Component} from 'react';
import Username from './components/test';
class App extends Component {
render() {
return (
浏览 1提问于2017-12-08得票数 2
回答已采纳
如何将道具传递给布局的page.jsx？(下13名)
//app/blog/layout.jsx
export default function RootLayout({ children }) {
return (
<div>
<Navbar />
<Sidebar />
{/*How do I pass any props from this root layout to this {children} that Im getting from page.jsx*/}
浏览 8提问于2022-11-25得票数 0
回答已采纳
构造函数中有默认状态。
this.state {
showModal:false
}
那么，我如何在不声明函数的情况下切换该值，但在JSX中却立即做到了这一点？我发现它的代码太多了，无法在函数中完成。难道不能简单一点吗？
render(){
return(<div onClick={()=>this.setState({showModal:!showModal})}></div>)
}
但我在上面的JSX中发现了语法错误。为什么？
浏览 2提问于2017-02-12得票数 0
回答已采纳
2回答
我有条件地为我的<input/> (标准HTML)组件设置样式。我将内联JSX样式作为style工具传递：
render() {
return (
<>
<input
type="text"
style={{
width: "100%",
paddingLeft: "8px",
paddingTop: "6px",
paddingBottom: "6px
浏览 0提问于2020-01-14得票数 2
回答已采纳
1回答
在对不同文件的响应中更改值
、、、、
所以我有这个react文件结构
app/
|- assets/
| |-pages/
| | |-desktop.jsx
| | |-mobile.jsx
| |-components.jsx
|-index.jsx
在index.jsx中，我需要desktop.jsx In desktop.jsx，我需要components.jsx，但是components.jsx中有一部分需要在index.jsx类中更改状态。
所以是这样的：
index.jsx -> desktop.jsx -> components.jsx
那么如何用inde
浏览 2提问于2017-11-30得票数 0
回答已采纳
AScreen显示AComponent，component有一个从0开始递增索引的按钮，当索引达到5时，AComponent将被BComponent取代。BComponent有一个可以返回AComponent并重置索引为0的按钮。
在以下代码中，backToACallBack.bind(null, useCurrentIndex)做了什么？为什么要绑定null
export default function AScreen() : JSX.Element {
const backToACallBack = (useCurrentIndex) => {
const [, set
浏览 0提问于2020-08-22得票数 0
1回答
我用制作了一个应用程序，并将所有文件保存为.js，并将其工作得非常好。有人能帮我理解一下，当我们保存带有.jsx扩展名的文件时，在性能或其他方面会带来什么差异吗？
如果没有，我们为什么要使用.jsx？
PS:虽然，我还没有做出反应，但我意识到了.jsx和.js扩展之间的基本区别。
浏览 1提问于2022-01-22得票数 0
4回答
我是新的反应，试图通过属性传递对象，但得到以下错误。
Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {title}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of
浏览 5提问于2016-04-30得票数 20
回答已采纳
我正在学习props，我有一个问题，在这种情况下，如何才能在HOC中获得。
WithRainbow.js(专案)
import React from 'react';
const withRainbow = (WrappedComponent) => {
const colors = ['red', 'blue', 'orange'];
const randomColor = colors[Math.floor(Math.random() * 3)];
const className = rando
浏览 0提问于2019-01-31得票数 0
回答已采纳
在setTimeout调用之后，它不会更改jsx元素。不更改节jsx元素中的内容变量。注意，我使用节元素，因为它是我项目的一部分。
function Any() {
let content = <p>No movies found</p>;
setTimeout(() => {
content = "";
}, 2000);
return (
<section>{content}</section>
);
}
浏览 1提问于2022-08-14得票数 0
回答已采纳
在我的Card.js中，我有以下代码：
const Card = props => {
return (
<View style={{...styles.card, ...props.style }}>{props.children}</View>
);
};
const styles = StyleSheet.create({
card: {
shadowColor: 'black',
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
浏览 3提问于2022-04-04得票数 1
回答已采纳
1回答
在相同的jsx文件中，我有以下声明：
import {jQuery} from '../../node_modules/jquery/dist/jquery.js';
import '../../node_modules/jquery/dist/jquery.min.js';
import '../../node_modules/bootstrap/dist/js/bootstrap.min.js';
然而，我得到了错误：
someModuleBundle.js:94625 Uncaught Error: Bootstrap's Java
浏览 0提问于2017-05-25得票数 0
我正在测试一个反应应用与Jest &酶。当我运行npm run test时，我在UserContext.jsx中得到了在MainPage.jsx中导入的错误。我怎么才能解决呢？
错误消息
不变违反:无效钩子调用。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一: 1. app和呈现器(如React ) 2的版本可能不匹配。您可能违反了Hooks 3的规则。在同一个应用程序中可能有多个React副本。
11 | };
12 |
> 13 | export const useUserValue = () => useContext(Us
浏览 0提问于2020-09-05得票数 1
回答已采纳
我能够成功地访问我的API数据，现在我必须改变它。在我的组件中，我能够用这段代码记录数据。在我的应用程序中，有一个输入字段，在输入字段中，我输入一个名称来更改我的产品的名称，然后在单击某个按钮后选择一个产品。selectedExport是产品的ID，props.inputValue是输入字段。目录是store-test/web/frontend/components/ProductsModal.jsx
const handleSelect = () => {
console.log(selectedExport) // id of the product
console.
浏览 2提问于2022-11-06得票数 1
1回答
我正在开发一个React应用程序，并且我正在使用Redux来存储状态。我有以下代码： requests.data.js： export default {
requests: [
{
"id": 9,
"timestamp": Date.now(),
"description": "Need help with ordering",
"status": "Completed"
浏览 12提问于2020-04-04得票数 0
回答已采纳
使用dicussion应用程序时遇到问题。我只能在给定的time.Having中渲染标题或post，但在thread.jsx中如何渲染存在问题。此应用程序在react和firebase中。请建议我如何解决这个问题。我认为post中的map函数不是用map函数编写对象的right.how。我需要把object写成道具吗？
Thread.jsx
postEditor.jsx-----
import React, {Component} from 'react';
import './DpostEditor.css';
export default class Po
浏览 0提问于2018-08-01得票数 0
2回答
我对React非常陌生，事实上，我正在为udemy上247个讲座中的第23课，学习有关状态和事件的知识。我很难找到这个问题的答案。
我们已经决定在我们公司使用react，到目前为止它证明是非常好的。我不想问这个问题，因为到目前为止我们还没有解决这个问题，但是我们需要扩展JSX，因为我们有AUTHENTICATON逻辑需要发生，如果它不能实现，那么我们就是在浪费时间。
我的问题是，是否可以从API外部获取JSX并在组件中呈现它？
例如,
//外部API通过AJAX请求返回JSX
<div id="app">
<SomeComponent/>
<
浏览 1提问于2018-12-17得票数 1
回答已采纳
我创建了一个小助手类：
import moment from 'moment';
export default class Format {
formatDate(date) {
return moment(date);
}
}
我试图在一个JSX模板中调用它：
import React from 'react';
import Format from '/imports/helpers/format.js';
export default class ListingCard extends React.Component {
浏览 2提问于2016-04-05得票数 0
回答已采纳
如何在vue3中使用jsx，在浏览器编译器中是否有任何方法可以编译jsx代码( vue独立版本)？
浏览 1提问于2022-10-22得票数 0
我已经创建了一个组件ChannelSection.jsx，它不是最外层的组件，App.jsx将是最外层的组件。我的ChannelSection需要从它的父组件接收道具。因此，道具类型如下：
ChannelSection.jsx：
import React, {Component} from 'react';
import ChannelForm from './ChannelForm.jsx';
import ChannelList from './ChannelList.jsx';
class ChannelSection extends C
浏览 2提问于2016-11-24得票数 0
回答已采纳
1.-为什么有必要从updateFn返回一个函数？如果我运行这段代码，注释返回函数，进度条将直接转到100 %。
2.-与仅在updateFn中有逻辑使返回函数是必要的相比，返回函数的区别是什么？
Ext.onReady(function(){
Ext.MessageBox.show({
title : 'Wait',
msg : 'Hold',
progressText: "on going ...",
width : 300,
progre
浏览 2提问于2014-05-25得票数 1
回答已采纳
我正在学习MeteorJS，React和React-Router，我在通过路由器传递URL中的参数时遇到了困难。我一直在寻找答案，但我找不到我做错了什么：
在我的Routes.jsx文件中('lists‘是我的MongoDB集合)：
render: function() {
return (
<Router history={browserHistory}>
<Route path='/' component={Navbar}>
<Route path='/home&
浏览 0提问于2016-01-05得票数 1
1回答
服务器端组件呈现
、、
我试图在服务器上使用一个非常简单的renderToString组件：
/** @jsx dom */
var React = require("react");
var Title = React.createClass({
render: function(){
return(<h1>Hello World</h1>)
}
});
module.exports = React.createFactory(Title);
当我调用ReactDOMServer.renderToString (组件)时，我得到了Error: Invar
浏览 1提问于2015-10-24得票数 2
回答已采纳
2回答
JSX中扩展算子的怪异行为
、、、、
JS环境下的扩展算子
let obj1 = {a:1,b:2}
let obj2 = {...obj1}
console.log(obj2)
Above code outputs {a:1,b:2} Which is a copy of obj1
扩展算子在JSX中的应用
让我们假设this.props = {lib:'react'，lang:'js'}
<App {...this.props}/>
会和
<App lib={this.props.lib} lang={this.props.lang}>
正如我们所知道的，this.pro
浏览 0提问于2020-12-12得票数 1
当我运行我的反应代码时，我会得到一个语法错误
App.jsx:8 Uncaught (in promise) SyntaxError: Unexpected end of input (at App.jsx:8:1)
at App.jsx:8:1
如果你看App.jsx，我不明白为什么这是错误的：
import React, {useState, useEffect} from "react";
function App() {
const [backendData, setBackendData] = useState([{}])
useEffect(
浏览 3提问于2022-11-20得票数 0
我正在对记录进行筛选，它有条件地显示以下两个选项之一: 1) record.jsx组件列表，或2)单个noResults.jsx组件。
过滤器(filter.jsx)位于一个名为recordsHeader.jsx的组件中，作为HTML select标记。它有一个调用getRecords方法的onChange事件，该方法允许根据select标记中的某些选项过滤结果记录。
目标:我想在noResults.jsx中有一个按钮，可以将过滤器设置回'all‘。问题:我可以将getRecords方法传递给它，它将显示它们，但不会直观地将select标记重置为'all‘。
我知道我可以用jQ
浏览 0提问于2017-04-06得票数 0
有人能帮帮我吗？当我尝试使用webpack时，它显示了以下错误：
Module build failed: SyntaxError: /path/to/my/folder/src/components/Main.jsx: Unexpected token (170:13)
168 |ReactDOM.render(
169 |<TodoApp
> 170 | todos={...store.getState()}
| ^
171 | />,
172 | document.getElementById(
浏览 2提问于2016-07-20得票数 0
我是一个使用React的新手，我有一个组件，需要将状态的值呈现给Dom，但是它不起作用--让我向您展示我的代码。
Links.jsx
import React, { useEffect, useState } from 'react'
import { Collapse } from 'antd'
const Links = () => {
const [isMobile, setIsMobile] = useState(false)
return (
<div>
<div>asd2</div&g
浏览 6提问于2022-05-13得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
