Jsx不能正确显示道具
JSX是JavaScript的语法扩展，用于在React中编写组件的UI部分。它允许我们在JavaScript代码中编写类似HTML的结构，使得代码更加直观和易于理解。
在React中，组件可以通过props（道具）来接收外部传递的数据。然而，当JSX不能正确显示道具时，可能有以下几个原因：
- 道具未正确传递：首先要确保道具已经正确地从父组件传递到子组件。在父组件中，需要使用属性语法将道具传递给子组件。例如：
<ChildComponent propName={propValue} />- 道具在子组件中未正确使用：在子组件中，需要使用props对象来访问传递的道具。例如，如果道具名为propName，则可以通过props.propName来访问其值。确保在子组件中正确地使用了道具。
- 道具值未定义或为空：如果道具的值未定义或为空，可能会导致JSX无法正确显示道具。在使用道具之前，可以通过条件语句或默认值来确保道具值的有效性。
- 道具命名冲突：如果子组件中存在与道具同名的变量或函数，可能会导致JSX无法正确显示道具。在子组件中，避免与道具同名的变量或函数，或者使用不同的命名约定来避免冲突。
总结起来，当JSX不能正确显示道具时，需要检查道具的传递、使用和值的有效性。确保道具被正确地传递给子组件，并在子组件中正确地使用。如果问题仍然存在，可以进一步检查是否存在命名冲突或其他代码逻辑问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tencentblockchain
相关·内容
1回答
Jsx不能正确显示道具
reactjs、filter、jsx
this.state.cards.filter(c=>c.id===this.state.idToDelete)[0].name)
当我使用这个函数来测试代码行时，它工作得很好，当我单击的时候，它会正确地显示所有的名称，但是当我应用这行来渲染，这样我就可以拥有这个名称了，所以在我的Jsx中，它会给我错误吗？</h2>
当我使用console.log并注释掉warningCard时，所有的卡都正确地显示了它们的名称，但是当我在中添加warni
浏览 4提问于2018-01-02得票数 1
1回答
React虚拟化的windowscroller scrollElement不工作
react-virtualized
你是对的，我没有正确地传递道具。现在，我将其设置为：<div className='container' ref={(ref) => {this.foo = ref;}}></div>
Section.jsx (只是传递道具)
<Panel scrollCont
浏览 19提问于2017-06-30得票数 0
1回答
当我想设置特定的道具时，TypeScript和JSX不理解情况
reactjs、typescript、jsx
我想在组件中设置特定的道具，并且我有这方面的类型，但是当我试图使用JSX设置错误的道具时，编译器不会向我显示错误。只有当我使用React.createElement时才会得到一个错误，但是我没有看到TypeError使用JSX。} />现在，编译器向我们展示了一切都是正确
浏览 5提问于2020-10-02得票数 1
回答已采纳
1回答
反应型记录合并型狭窄
reactjs、typescript
CourseFilterChips = (props: CourseFilterChipsProps) => { let chips: JSX.Element我是新的反应和类型记录世界，我面临的问题时，缩小反应组件道具类型。根据道具传递给组件的内容和它们的类型，我试图缩小道具类型。类型记录不能正确地缩小基于其他道具的toggler函数类型，并显示参数的怪
浏览 1提问于2022-11-23得票数 0
1回答
visual studio代码+react本机+类型记录: jsx intellisense不工作
typescript、react-native、visual-studio-code、intellisense、reactjs
虽然intellisense和类型检查一般都是有效的，但我在使用jsx intellisense时遇到了一些问题，但是对于任何jsx道具，代码建议都不会出现。我的意思是，通常在jsx元素中录制ctrl+space时，vs代码会显示可用的道具。这不管用。在上面的示例中，所提供的建议不是这个jsx元素<Content>的可用支持。"typings/**/*.d.ts" "
浏览 4提问于2016-12-23得票数 1
回答已采纳
1回答
如何使用前向作为支柱与样式-组件？使用带类型记录的正向支持
javascript、reactjs、typescript、styled-components、react-props
正如你所看到的，它不是很详细，也没有展示如何正确使用这个道具。// Button.jsx href: 'https:/&
浏览 1提问于2021-01-28得票数 2
回答已采纳
3回答
如何键入接受另一个组件作为支柱的React组件以及该组件的所有支持？
reactjs、typescript、emotion
但是，如果一个组件被传递给as，那么所有对该组件有效的道具现在也应该是Wrapped的有效道具。type Props<El extends JSX.Element = React.ReactHTMLElement<HTMLAnchorElement>> = { as:El } & React.ComponentProps<El>;
const Wrapped: React.FC<Props> = (props) =
浏览 2提问于2020-04-10得票数 5
回答已采纳
1回答
我不知道如何将道具传递给index.jsx中的函数。这个jsx文件是Adobe的jsx，它与react jsx文件没有任何关系，看起来也完全不像它。我可以使用以下命令访问jsx文件并运行其中的代码： loadExtendscript('./extendscript/index.jsx'); 但是我不能这样通过任何道具。我还可以使用以下命令对PPRO执行一般的jsx命令： eva
浏览 26提问于2019-06-01得票数 0
回答已采纳
2回答
反应功能组件中的TypeScript检查
reactjs、typescript、jsx
React.FC { <div> </div>但这给了我以下错误：
类型'Element‘不能分配到键入类型‘元素’不提供签名的匹配(道具：{子类？：ReactNode；}，上下文？：any)：ReactElement<any，any>‘..ts(2322)
我还试图让它简单地使用JSX.Element。(别名)函数SiteLayout({子类}：支持)：<em
浏览 2提问于2020-07-02得票数 4
回答已采纳
1回答
无法正确键入下列特殊函数
reactjs、typescript、react-typescript
我编写了一个特殊的函数，我无法正确地输入(这是预料中的，因为我是TypeScript初学者，甚至是一个类型的初学者)。IndexProps> { }
以下是我试图键入的内容： LayoutComponent: React.ComponentType<LP
浏览 2提问于2021-03-15得票数 0
回答已采纳
3回答
是否有方法提取JSX元素的道具类型？
reactjs、typescript、jsx、typescript-typings、typescript-generics
我的目的是从给定的元素中提取道具，这有可能吗？
const componentProps = getComponentProps(<Component name="jon" />); //type is JSX.Element
浏览 6提问于2021-03-22得票数 2
回答已采纳
7回答
为什么我会收到这样的警告：“禁止重复的道具允许反作用/jsx-不-重复-推进”
react-redux
警告没有重复的道具允许反应/jsx-不重复-道具#
它显示的是第28号线，但没有任何道具正在使用。
浏览 12提问于2017-02-21得票数 35
回答已采纳
1回答
如何动态地将路由添加到react应用程序？
javascript、reactjs、react-router
我试图动态地在我的应用程序中添加路由，但是在这里发现了一些问题：import { Route, Switch } from 'react-router-dom';
: null} </div>props.admin.routesreact 道具包含路由数据
浏览 0提问于2019-04-17得票数 0
2回答
FireBasev.9 deleteDoc( )不会做任何事情，也不会捕获任何错误
javascript、reactjs、firebase、google-cloud-firestore
我已经更改了规则，并确保导入是正确的，但它仍然不能工作。 //?(doc(db, "items", id)); catch (error) { }删除按钮，YourCard.jsxprops.deleteItemHandler(props.id) >
浏览 3提问于2022-04-24得票数 1
回答已采纳
2回答
在反应中，propType会是一个JSX道具吗？
javascript、reactjs
在react中，您可以设置进入组件的道具的propType。对于我的一个道具，我希望值要么是null，要么是JSX的一行。React没有涵盖用于JSX的propType。JSX的正确propType是什么？
浏览 2提问于2016-11-25得票数 31
回答已采纳
3回答
默认道具被忽略。
reactjs、flowtype
我在React中使用了Flow v.0.52类型，但在正确分配默认道具方面遇到了问题。News.jsx static defaultProps = {
postList: {apiData: [], total:在News.jsx组件中，忽略默认道具，结果postList.apiData.length遇到类型错误Uncaught TypeError: Cannot read property 'length'Ne
浏览 2提问于2017-09-23得票数 2
回答已采纳
1回答
在UI上不显示数据的响应道具
reactjs
我在学习Reactimport React from 'react'; render() {this.props.contentProp}</p> );
浏览 1提问于2020-04-21得票数 0
回答已采纳
2回答
栅格子网格在渲染时折叠
javascript、reactjs、griddle
支持。我在更改状态的一个字段中有一个自定义组件(用于行选择)。此状态更改会导致重新渲染，这会塌陷子网格。然而，我希望它保持开放。注意小提琴中的代码如何更新onCountClick状态(单击"inc“按钮)，从而导致重新呈现： var columnNames = ['id', 'age', 'nam
浏览 2提问于2016-05-11得票数 7
3回答
不能将useState() 'set‘函数传递给grand子
javascript、reactjs、react-hooks、parent-child、use-state
我在试图让我的useState变量工作时遇到了问题。我在祖父母中创建状态，然后将它传递给我的父母。下面是我的代码的简化版本： <div> <Parent setSelectedID2={setSelectedID} .../> //(elipses just mean that I'm passing other param
浏览 3提问于2021-01-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
