无法从react组件中的属性读取属性
从react组件中的属性读取属性是指在React组件中获取传递给组件的属性值。在React中，可以通过props对象来访问组件的属性。
React组件的属性是通过父组件传递给子组件的。父组件可以在使用子组件时，通过在子组件标签上添加属性来传递数据给子组件。子组件可以通过props对象来获取这些属性值。
以下是一个示例代码，展示了如何从React组件的属性中读取属性值：
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const name = 'John';
const age = 25;
return (
<ChildComponent name={name} age={age} />
);
}
// 子组件
import React from 'react';
function ChildComponent(props) {
const { name, age } = props;
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}在上面的代码中，父组件通过name和age属性将数据传递给子组件。子组件通过props对象获取这些属性值，并在渲染时将它们显示出来。
React组件的属性可以用于传递任何类型的数据，包括字符串、数字、布尔值、对象等。在实际开发中，可以根据具体需求传递不同的属性，并在子组件中根据这些属性值进行相应的处理和展示。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：https://cloud.tencent.com/product
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网：https://cloud.tencent.com/product/iot
- 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
- 腾讯云区块链：https://cloud.tencent.com/product/bc
- 腾讯云元宇宙：https://cloud.tencent.com/product/mu
相关·内容
1回答
我有一个主干文件，在其中，我使用React.renderComponent呈现一个React.renderComponent (Timer)。但是，在react组件中，我有一个状态呼叫计数器。我想从主干文件中获取这个组件的状态。虽然我将一个props.model传递给计时器，但我可以在定时器内部修改这个道具，但这将使props.model中的数据持久化，这是我不想做的。
由于Timer不是React组件的子程序，所以我无法使用refs访问Timer.stat。那么，是否有一种方法可以在其父级中获取Timer的状态？
非常感谢！
浏览 2提问于2015-10-20得票数 1
1回答
我正在使用React Native核心Navigator组件，但在按下导航栏中的按钮时，我无法弄清楚如何在组件之间传递数据。以下是我的设置的一些示例代码。
const NavigationBarRouteMapper = {
Title: (route, navigator) => {
let title;
switch (route.component.displayName) {
case 'FirstScreen':
title = 'First Screen';
break;
浏览 0提问于2015-11-25得票数 2
2回答
尝试从react组件中显示道具。需要显示Tabs的名字来做这个。
import React from 'react'
import { Link, browserHistory } from 'react-router'
import Tabs from '../../components/Tabs/Tabs'
function Revenue ({ children }) {
return (
<div>
<div>
<Tabs items = { ['
浏览 0提问于2017-01-17得票数 2
回答已采纳
我是React JS的新手，我有一段React钩子的ES6代码。我正在尝试访问从父级发送的props元素，但我无法在此处读取它。我可以使用基于类的React App来读取它，但不能使用Hooks实现。
import React, { useState, useEffect } from 'react';
//Packages
import axios from 'axios';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory fr
浏览 13提问于2020-05-10得票数 0
回答已采纳
React路由器:链路和路由不通过状态到组件
我正在构建一个在线购物应用程序，包括React，Redux和React路由器。在主页上，将显示所有项目。我希望用户能够点击一个图像，并被带到一个页面与该项目的项目详细信息。
我就是这么做的：
在App.js中，我使用BrowserRouter、路由和交换机进行路由
在Home.js中，我使用react路由器的链接将主页上的图像链接到项目详细信息页；链接应该以状态形式将ID传递给项目组件(参见下面的Home.js代码)
Item.js应该呈现一个项详细信息页面。项目的ID将传递给item组件，该组件将呈现该项的详细信息。
这看起来
浏览 0提问于2019-09-06得票数 5
回答已采纳
对于reactjs来说，我是新手，我想使用两种方式访问组件Bdc --首先，当我单击另一个组件中的按钮时，使用它的路径直接在搜索栏中访问该组件。
第一种方法是使用useLocation
<Button
variant="contained"
onClick={() => navigate("/nouveauBdc", {state: {id: '', isNew: true}})}>
NOUVEAU BON DE COMMANDE
</Button>
在我的组件中，我可以读取从na
浏览 3提问于2022-05-03得票数 0
回答已采纳
2回答
我已经定义了我的路线，我的链接工作正常。当路由器调用组件时，我希望通过链接传递一个道具。我甚至不知道这是否可能。
为了更好地理解，请查看代码：// I WANT TO PASS THE CURRENT PROJECT AS A PROP HERE和//I WANT TO GET THE PASSED PROP IN THE LINK HERE
我在react中的功能组件：
const ProjectList = () => {
....//not meaningful code. I get my data from a call to a database so its not pas
浏览 19提问于2021-02-22得票数 0
回答已采纳
1回答
物料UI开关不更改UI
、、、、
我正在使用Material UI的开关来改变多页应用程序的主题。发生的唯一错误是交换机不能从左向右移动(ui功能不会出现)，但onChange功能工作正常。我尝试了一下，结果是当我移除forceUpdate()时，material ui开关将会工作，但是组件将不会被重新渲染。forceUpdate中有什么原因导致交换机功能无法正常工作？
App.tsx：
import React from "react"
import {Switch, Route, BrowserRouter, Redirect} from "react-router-dom"
import
浏览 2提问于2020-11-24得票数 1
在React.Component的子类中，是否必须从super.componentDidUpdate方法调用componentDidUpdate？还是自动完成的？
(我试图调用它，但有一条错误消息无法读取属性call of undefined)
浏览 9提问于2015-06-10得票数 1
回答已采纳
我是一个新手，几天前才开始学习React。我在使用react路由器v4时遇到了一个问题。
我有一个主页组件，如下所示：
import React, {Component} from 'react';
class AboutPage extends Component {
render() {
return (
<div>
<h1>About</h1>
<p>this is the about page</p>
浏览 0提问于2017-06-05得票数 0
我有以下代码示例：
import React, {Component} from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {connect} from 'react-redux'
import axios from '../../axios'
import classes from './List.module.css'
import {Button,ListGroup} fr
浏览 1提问于2019-04-24得票数 0
回答已采纳
在我react原生项目中，我使用了DrawerNavigator，我从它导航到SwitchAccount页面。在SwitchAccount页面中，我使用了react-native-tabs选项卡。下面是我使用的代码
render() {
return (
<View style={[styles.container]}>
// Here _renderTab function return component based on selectedService
{this._renderTab(this.state.selecte
浏览 22提问于2018-06-19得票数 6
回答已采纳
我使用的是，我有一个由复选框组组成的组件过滤器。每个checkbox都有id，我必须传递它们，以便过滤results.First的想法是执行方法，该方法将在checkbox onCLick之后调用(传递checkbox id)。在此方法中，将一个对象设置为state，并在每个复选框后单击change it。我记得，在Jquery中存在$('form').serialize()，它每次都会自动检查表单元素和检查值。在react或者语义ui react中存在这样的东西吗？与在状态中创建和控制对象相比，使用这种方法更简单
浏览 1提问于2018-01-31得票数 0
2回答
当我在Boxes.js中将onPress={test}添加到View标记时，无法从函数onPress={test}获得任何输出，这是我用Dice.js编写的。我尝试过在像test()这样的标签上添加Text，但是当我把它放在视图标签上时，它就不起作用了。
Boxes.js：
import react from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import Dice from "./Dice";
import PatternDivider
浏览 3提问于2022-07-03得票数 1
回答已采纳
2回答
我真的在为一个看似简单的问题而挣扎。我在React中工作，并试图为传递的状态设置一个变量。
下面是传递的JSON
{
"id": "6",
"FName": "Chris",
"LName": "Baker",
"Height": "6'2",
"Meds": [
{
"MedicationName": "acetaminophen",
"Doseage
浏览 0提问于2017-07-25得票数 0
回答已采纳
我在react-router-dom有一条这样的路线：
<Route path="/result/:result" component={ResultsView} audio={audio} speechRecognition={speechRecognition} />
还有一个像这样的带有类型化道具的组件：
interface ResultsViewProps {
audio: HTMLAudioElement;
speechRecognition: Types.SpeechRecognition;
}
interface ResultsViewRout
浏览 2提问于2021-12-04得票数 0
回答已采纳
3回答
我无法更改导入的RN块的状态。
我试着：
this.setState({myState: "This does not do anything"})
但它不起作用。我怀疑问题出在这一点上--只引用主要文档。但我不知道怎么改变它。
有趣的是，
state = {myState: 'Now it is changed'}
this.setState({})
这是可行的。但从我在这里读到的内容来看，它并不被推荐。
谢谢!
// MAIN FILE
import React, {Component} from 'react';
import {But
浏览 0提问于2019-04-12得票数 1
2回答
React路由器结构化-传递函数
、、、、
我对reactjs非常陌生，只是想知道是否有什么简单的方法可以显示从相同组件到不同路由的信息。在下面的示例代码中，我只有两个函数，它们只是返回充满文本的div，调用它们并立即呈现它们(在类中或在路由器中)将使它们处于同一“页面”上。 我试过通过道具传递裁判，但他们总是以未定义而告终。我认为状态改变会很尴尬，因为没有真正的“事件”。我使用create-react-app、react-routerv4和react-bootstrap。 在App.js中 import React, { Component } from 'react';
import './App.css&
浏览 25提问于2019-01-20得票数 0
回答已采纳
我在学习反应。
我理解如何在类之间使用react共享方法。
但我想知道它是怎么反应的。从下面的代码中，我想知道它是如何调用handleClick方法的，它是如何将this ( Board )绑定到函数的，所以当在Square类中调用它时，它指向Board类，我们可以设置它的状态属性等等。
在下面的代码中，它向Square类发送一个带有箭头函数的onClick属性，其中包含板类方法handleClick(i)。
调用Square类呈现方法时，this.props.onClick被传递给React按钮元素的onClick属性，内部的方法(HandleClick)被调用。
当我handleClic
浏览 1提问于2020-06-04得票数 1
回答已采纳
在我的mapStateToProps函数中，我将idToken和accessToken设置为存储在状态中的值。这是可行的，因为我已经能够从组件中引用这些值。在mapDispatchToProps中，我尝试在我的操作中使用这些道具作为参数。但是，ownProps是一个空对象。为什么它没有idToken和accessToken
容器：
import { connect } from 'react-redux'
import { toggleAddQuestionModal, fetchFriends } from '../actions'
import AddQue
浏览 5提问于2016-04-10得票数 19
回答已采纳
我有以下问题：
我想要像这样编写jsx代码
<div className="my-section">
<Window>
<div>Window content</div>
</Window>
</div>
<div className="window-container">
</div>
在我的react内容中的某个位置，但我希望该窗口与其他窗口一起呈现在一个特殊的DOM元素中，例如
<div class="my-section
浏览 0提问于2016-02-04得票数 1
在使用HTML时，是否有CSS选择器或React本机支持的指示符来选择CSS中的所有组件(如主体选择器)？
我们不选择组件来对它们进行样式化，这与html不同；我们选择要被样式化的html元素，例如，从css工作表中选择标签名。相反，在react中，样式名称被放入组件中，即标记中。
浏览 3提问于2015-09-01得票数 9
回答已采纳
我学习了React和JavaScript，对此我真的很陌生，现在是React路由器V6。我有一个从两个位置调用的方法，并希望创建一个util函数来处理这个问题。
它看起来是这样的：
import { useNavigate } from 'react-router-dom';
import * as ROLES from '../../../constants/roles';
export default function dashboardNavigater() {
const { authUser } = this.props;
const
浏览 1提问于2020-12-23得票数 0
2回答
我有一个简单的模式，在其中我有一个提交的表单，我显示错误，现在我想将这些错误传递给子组件。 下面是一个简化的父组件 import React from 'react';
import Input from 'components/Functional/Input';
function Parent() {
const [errors, setErrors] = useState([]);
const handleSubmit = async e => {
const formData = new FormData
浏览 27提问于2021-01-26得票数 0
回答已采纳
在React中的onclick事件(不要认为React是导致问题的原因，我认为这是我处理对象和数组的方式)，我试图获取一个本地存储变量并将一个元素(键)推到它，但是它正在抛出错误的'Uncaught TypeError:无法读取属性‘in’的null。
下面是代码：
import React from 'react';
import Images from './images';
export default React.createClass({
getInitialState() {
// If doesn't ex
浏览 3提问于2016-04-27得票数 0
回答已采纳
3回答
我从API中获取数据并将其传递给表组件，如下所示：
function MainSectionOrganization() {
const [obj, setObj] = useState([]);
useEffect(() => {
fetch('http://127.0.0.1:5000/getCompanies')
.then((response) => {
return response.json();
}).then((data) => {
浏览 4提问于2020-06-23得票数 2
回答已采纳
我想在React中使用分页插件。jQuery中的原始用法：
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, 8],
pageSize: 3,
callback: function (data, pagination) {
// template method of yourself
var html = template(data);
$("#dataContainer").html(html);
}
});
我想用
浏览 2提问于2016-10-03得票数 0
回答已采纳
我正在尝试获取一个包含多个对象信息的json文件，但似乎无法正确获取。我是个新手，所以我有可能把状态和道具之类的东西搞混了。
我已经成功地从控制台中的json接收到了对象列表，但是我无法在我的return语句中显示它们。
感谢您的帮助！
import React from 'react';
import ReactDOM from 'react-dom';
class PlayerFeed extends React.Component {
constructor(props) {
super(props);
this.
浏览 2提问于2018-07-31得票数 0
3回答
我需要在一个更大的遗留应用程序中托管一个react应用程序，该应用程序有一些全局变量，在部署时我可以访问这些变量(在单独定义了带有全局变量的js文件之后，我引用了react应用程序的js文件)。
显然，我在构建一个试图引用未定义变量的应用程序时遇到错误(更不用说，如果不能访问它们，我就无法在本地进行开发)。解决这个问题的最佳解决方案是什么?我如何才能仅仅为了开发而注入这些全局变量(甚至是虚拟值)？
浏览 2提问于2017-08-22得票数 0
我有一个简单的react组件，它必须在用户要求时从服务器加载数据。问题是我不知道如何在组件加载状态之前传递动态变量speakerUrl并访问它。当然，我可以从this.props.params访问它，但是组件没有加载，当我进行graphql查询时也无法访问它。查询-当我手动设置url变量时，QuerySpeaker运行良好。
路由器
<Route path="/speaker/:speakerUrl" component={SpeakerPage} />
组件- SpeakerPage
import React from 'react';
impor
浏览 5提问于2016-12-07得票数 6
回答已采纳
1回答
我有以下list组件：
import ListItem from './ListItem';
import React from 'react';
import { ListView, FlatList } from 'react-native';
export default class List extends React.Component {
render() {
var sampleList = {"1": "A", "2": "B", "
浏览 0提问于2017-10-02得票数 0
我有两个组件(Chat.js Phone.js)和一个容器(Full.js)，我正在使用以下版本: react 16.1.1，react-router-dom:4.2.2。以下是我的文件：
Full.js
class Full extends React.Component {
render () {
return(<Switch>
<Route path="/phone" name="Phone" component={Phone} />
<Route path="/chat" n
浏览 0提问于2018-09-04得票数 0
4回答
我正在尝试将静态JSON数据加载到我的react应用程序中。但是，它不允许我加载数据。
我使用webpack版本4.26.1
它显示了以下错误：
SyntaxError: src/data/movieData.json: Unexpected token, expected ; (2:10)
1 | {
2 | "data": [
| ^
3 | {
4 | "id": 1,
5 | "title": "Freed",
浏览 0提问于2018-12-04得票数 2
回答已采纳
我有一个问题，我在AsyncStorage中基于相同的密钥在多个组件中执行setState。因为状态是在componentDidMount中设置的，并且这些组件不一定要在导航时卸载和挂载，所以状态值和AsyncStorage值可能不同步。
这是我能做的最简单的例子。
组件A
A只需设置导航和应用程序。
var React = require('react-native');
var B = require('./B');
var {
AppRegistry,
Navigator
} = React;
var A = React.createC
浏览 11提问于2015-06-11得票数 6
我正在将我构建的一个React组件转换为一个模板web组件，并且我不知道如何检索所有传递到组件中的道具，这些道具没有用@Prop装饰器定义。这是我的反应代码：
import { ButtonHTMLAttributes } from "react";
export default function CoreButton({
name,
children,
...props
}: ButtonHTMLAttributes<HTMLButtonElement>) {
return (
<button
name={`exampl
浏览 1提问于2022-10-01得票数 0
回答已采纳
1回答
从组件外部更新状态
、、、、
我正在尝试使用JWT在我的React应用程序中实现身份验证。登录后，服务器发送access token和refresh token。访问令牌在一小时内过期，而刷新令牌则持续一年。两者都存储在localStorage中。
我正在使用axios向服务器发出请求。我已经创建了一个文件api.js，它创建了一个为请求设置baseURL的axiosInstance。这个文件导出这个axios实例和所有其他想要使用axios的组件/文件，从这个文件导入它- api.js。我还在同一个文件中设置了一个axios interceptor，该文件将在发送请求之前修改每个请求。如果令牌没有过期，它基本上会在au
浏览 1提问于2021-07-30得票数 0
1回答
尝试测试带有主题的样式组件时出错
、、、、
我很难让单元测试通过使用主题的样式组件。我做错了什么？
失败src/components/Button/spec.js控制台
console.error错误:未定义TypeError:无法读取未定义的属性“primary1”
Header.js
import React from "react";
import { Container, Wrap, Logo, Image } from "./HeaderStyles";
import logo from "../../assets/graphics/logo.png";
const Heade
浏览 3提问于2021-09-23得票数 1
我刚刚把我的应用程序从React Native 0.58.5升级到0.61.2，现在我不能在安卓系统的FlatList中选择文本。
我尝试在React Native 58.5的Text组件中设置selectable = {true}，它工作得很好，可以复制文本中的内容。但是在将React Native版本从0.58.5升级到0.61.2之后，无法选择用于在Android 9.0中复制/粘贴内容的文本。实际上，它可以在Android 5.0上工作，但不能在Android 9.0上工作
export default class App extends React.Component {
_re
浏览 2提问于2019-10-27得票数 4
我不是一个专业的JS和反应(刚刚开始大约2-3个月前)，现在试图修改一个项目，我正在工作。我对作用域的大部分问题都有反应。下面是我试图将一个对象数组从Button onClick处理程序传递给生成excel文件的组件的代码。
处理程序部分是主组件的子部件，而呈现部分是同一组件的一部分。
处理程序：
报告=(道具) => {.
let xlsxFileHandler =() => {
if (dataSource) {
table = document.querySelectorAll("table");
table1=table[0];
ta
浏览 0提问于2021-02-16得票数 0
回答已采纳
我正在教育自己的反应和反应-路由器，并想做一个非常小的登录页面，其中用户可以登录到秘密页面。我正在使用TypeScript。
我在这里做了一个运行示例：
我不确定我是否声明了正确的PropsType以将其应用于Login组件。当使用RouteComponentProps作为属性时，我似乎无法访问组件的状态，所以我可以设置isAuthenticated=true。
所以我的问题是，我如何更新状态，以便isAuthenticated获得新值true？因为无法从登录组件访问this.state.isAuthenticated，但可以从this.props.isAuthenticated访问！
我是否
浏览 0提问于2020-01-31得票数 0
当我获取精灵宝可梦API时，为什么渲染函数运行2次，第一次没有状态更新，第二次状态更新？当我从API调用render function中的属性时，我也得到了一个错误。“无法读取null的属性'next‘”
import React, { Component } from "react";
import "./index.css";
import axios from "axios";
const url = `https://pokeapi.co/api/v2/pokemon`;
console.log(url);
class App
浏览 5提问于2019-03-13得票数 2
我试图建立一个简单的计算器在反应使用组件。我想获取按钮的值并将其赋值为"currentItem"，但是，我仍然得到错误“无法读取属性'setState‘of null”。这是密码。代码位于两个单独的jsx文件中。我真的很感谢你的帮助。
import React from 'react';
import NumbersComponent from './NumbersComponent.jsx';
import EquationComponent from './EquationComponent.jsx';
import
浏览 2提问于2016-10-10得票数 0
回答已采纳
1回答
我有一个使用react-router的React应用程序。我的路由的简约版本如下：
<Router>
<div className="App">
<Sidebar />
<div className="app-container">
<Switch>
<Route path="/" exact render={Home} />
<Route path="/logs" e
浏览 4提问于2020-09-29得票数 1
1回答
我在Login.js中创建了一个存储，当用户登录时，会向该存储发送一个用户名。然后在Profile.js中，我获得这个用户名并呈现它。
代码如下所示：
Profile.js
import { connect, Provider } from "react-redux";
function mapStateToProps (state) {
return {
user: state.user
}
}
export class Profil extends React.Component {
render() {
return (
<
浏览 0提问于2018-08-12得票数 1
我有以下内容：
import React from 'react'
import PropTypes from 'prop-types'
const MyComponent = ({ text1, text2 }) => {
return (
<div>
<p>{text1}</p>
<p>{text2}</p>
</div>
)
}
MyComponent.propTypes = {
浏览 3提问于2021-11-22得票数 3
回答已采纳
1回答
我是新的反应和Redux，我一直试图做一个CRUD应用，以便我可以实践的技术。该应用程序的目的是将联系人添加到列表中，编辑联系人或删除联系人，所有这些都是使用firebase作为后端的。
到目前为止，我可以将表单组件(NewContact.js)中的联系人添加到firebase (使用Thunk作为中间件)，并将其呈现给a组件(Contact.js)。
现在，我想要做的是，当我点击编辑图标时，我应该将EditContact组件上的特定联系人信息作为表单进行编辑，然后将更新提交到firebase。
下面是NewContact.js组件的代码：
import React, { Component
浏览 2提问于2020-08-11得票数 0
我无法测试使用本机基础图标的组件。它在扔Cannot read property 'default' of undefined。
The above error occurred in the <Icon> component:
in Icon (at IconNB.js:80)
in IconNB (at connectStyle.js:384)
in Styled(IconNB) (at Icon/index.js:67)
in Icon (at connectStyle.js:384)
in Styled(Icon) (at testing
浏览 0提问于2019-04-05得票数 1
回答已采纳
当成功提交表单时，我正在尝试呈现其他组件。表单有不同的rails布局，在表单提交后，它会使用不同的布局进行重定向。
使用react-router和重定向对象来渲染组件，但是如何使用布局来渲染它呢？此外，我想显示闪光信息后，表单提交与反应。因此，如果在提交表单后重新加载页面，则无法在react组件中设置flash消息。有什么建议吗？
谢谢。
浏览 0提问于2018-05-09得票数 3
我想对某些用户操作执行导航，比如按钮的onSubmit。假设一个用户点击了Add contact按钮，我想要react路由器重定向到"/“，这是主页。目前，我正面临这个问题--> TypeError:无法读取未定义的属性(读取“push”)。作为初学者，我非常感谢专家的帮助。
AddContacts.js
import React, { Component } from "react";
import { Consumer } from "../../context";
import TextInputGroup from "../layo
浏览 5提问于2021-11-09得票数 6
回答已采纳
我不知道该如何处理这个错误消息。这意味着什么，我该如何解决这个问题？
“无法读取未定义的属性‘映射’”
守则是：
import React from 'react'
import Result from './Result'
function Results({ results }) {
return (
<section className="results">
{results.map(result => (
<Result resul
浏览 4提问于2020-08-11得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
