在React中访问props对象的键值对中的键名
，可以通过props对象的属性来访问。props是一个包含组件属性的JavaScript对象，可以通过this.props来访问。
例如，如果有一个名为"example"的组件，它接收一个名为"message"的属性，可以通过以下方式访问该属性的键名：
class Example extends React.Component {
render() {
const { message } = this.props;
const keys = Object.keys(message);
// keys数组中包含了message对象的所有键名
return <div>{keys}</div>;
}
}
// 使用Example组件，并传递一个名为"message"的属性
ReactDOM.render(<Example message={{ key1: 'value1', key2: 'value2' }} />, document.getElementById('root'));在上述示例中，我们使用了解构赋值语法来从props对象中提取"message"属性，并使用Object.keys()方法获取了该属性对象的所有键名，并将其渲染到页面上。
React中访问props对象的键值对中的键名的相关链接：
- React官方文档：https://reactjs.org/docs/components-and-props.html
- 腾讯云云开发（Serverless）：https://cloud.tencent.com/product/scf
相关·内容
1回答
在一个功能组件中，如何使用react-redux connect访问redux store中的props？
javascript、reactjs、redux、react-redux
在如下所示的函数式react组件中，如何访问从redux存储传来的道具，类似于如何访问componentDidMount()中类组件的this.props，如下面的注释所示？ import React from 'react';
import { connect } from "react-redux";
import * as actions from "../../actions";
const ComponentName = () => {
// componentDidMount() {
// this.p
浏览 17提问于2020-07-05得票数 0
回答已采纳
1回答
如何将函数传递给React的渲染函数
reactjs、typescript
我不确定如何恰当地表达这个问题，但我会尽我最大的努力帮助你理解我的问题。我对前端有点陌生，所以面临着一些困难。有一个名为TableViewCotroller的控制器，它是用typescript编写的，也包含JSX代码。该控制器负责执行任何与表相关的操作。这个控制器看起来像这样： import * as React from 'react';
export class TableViewController extends BaseViewController {
constructor(props: any) {
super(props);
}
protec
浏览 33提问于2021-09-29得票数 0
1回答
React Native中的屏幕刷新问题
react-native、react-navigation
我正在制作一个使用firestore的应用程序。每当firestore中的数据发生更改时，我的屏幕上都会显示两组数据，一组包含更改前的数据，另一组显示更改后的数据。 例如，如果我有两个data a,b，并且b更新为c，则屏幕将显示a,b a,c 在两个屏幕之间切换后，屏幕被刷新，一切都变得正常。如何让屏幕只显示一组新数据 有什么帮助吗？ import React,{Component} from 'react';
import { View,ScrollView,AsyncStorage, StyleSheet, Dimensions, SafeAreaView,Platf
浏览 17提问于2020-12-25得票数 0
2回答
webpack/react/babel没有编译JSX
javascript、reactjs、webpack、babeljs
我知道有很多类似的问题，但我没有找到解决方案，其中一些是旧的，所以它们不适用。 我为react创建了一个Webpack环境，但没有编译JSX语法。 我使用的是： "@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0", 在我的ba
浏览 12提问于2019-01-10得票数 1
回答已采纳
2回答
React JS -如何访问子组件中从父组件传递的属性
javascript、reactjs
在我的react应用程序中，我将数据作为道具从父级传递到子级。在我的子组件中，我可以看到props中的数据，但是当我尝试访问数据时，我得到了一个错误消息"cannot read property of undefined“。
我已经编写了我的子组件，如下所示-
子组件-
import React from 'react';
import ReactDOM from 'react-dom';
import { setData } from '../actions/action'
import { connect } from 're
浏览 2提问于2018-10-10得票数 1
3回答
类型记录-如何省略属性，以便子集可以通过扩展传输？
reactjs、typescript
版本:打字稿3和反应16。
我希望传递自定义属性，并允许覆盖组件上的所有标准HTML属性。
组件使用情况：
<ExamplePropTransfer specialProp={"test"} style={{color:'blue'}}/>
ExamplePropTransfer：
import * as React from "react"
import {HTMLProps, PureComponent} from "react";
export interface ExampleProps{
special
浏览 0提问于2018-09-06得票数 2
1回答
React应用程序:仅在生产中从箭头函数调用箭头函数会导致错误
javascript、reactjs
我在一个正在构建的应用程序中遇到了一个问题，通过在由create-react-app创建的全新应用程序中进行复制，我简化了该应用程序。 App.js： import React from "react";
import "./App.css";
import TheComponent from "./component";
function App() {
return (
<div className="App">
<header className="App-header&
浏览 44提问于2020-07-29得票数 0
1回答
React组件在使用redux操作更新状态后不更新
reactjs、redux、react-redux、react-thunk
/keywordsActions import { UPDATE_KEYWORDS } from "./actionTypes";
import queryString from "query-string";
const keywordsArrayFromUrl = () => {
const query = queryString.parse(window.location.search);
if (query.keywords) {
const removeDuplicate = new Set(query.keywords.sp
浏览 9提问于2019-03-27得票数 1
1回答
React从子对象的子对象调用父方法
reactjs、react-router、react-router-v4
我的react应用遇到了一个小问题。我使用的是bluprintjs Toaster，我需要在所有其他组件上显示它们，不管是什么。如下所示，如果在登录或注销过程中出现错误，用户将始终看到toast，即使有重定向。 我的问题是，我有一个中间组件，用于保护对unAuthenticated用户的访问。 在我的app类中，我有一个对Toaster的引用，可以很容易地调用renderToaster来显示吐司。因此，该方法工作正常。 但是，当我将它传递给ProtectedRoute，然后传递给MyForm组件时，我不能在MyFrom组件中调用它。从应用程序-> ProtectedRoute ->
浏览 11提问于2019-02-17得票数 0
回答已采纳
1回答
React & Bootstrap:如何使PureComponent卡中的输入框更新自身的其他实例？
reactjs、react-bootstrap
我有一张纸牌清单。每个卡都设置为一个PureComponent。每张卡片都有一个带有布尔值的输入框。我想让用户选择最多3张卡。一旦达到最大值，其余的输入框就会被禁用。我的代码当前有一个带有两个操作的reducer : makeProductDisabled和makeProductEnabled。它一次更新一个要禁用的项目，但需要对其进行更改，以便禁用其余未选中的项目。 减速机： export const productListReducer = (state, action) => {
let position;
switch (action.type) {
浏览 6提问于2019-03-12得票数 0
2回答
适当避免将无效属性传递给React基元
javascript、reactjs
我经常遇到这样的情况:需要让组件接受任何有效的HTML属性，才能让底层的HTML元素使用它们。
class Input extends React.Component {
// Here I use one of the `props` to add logic to
// my component
onChange = () => alert(this.props.alert);
render() {
// Here I want to pass all the properties
// down to the HTML input element
浏览 3提问于2017-04-23得票数 1
3回答
在传递道具时什么时候使用this.prop？
javascript、reactjs、react-native
我是JS/React的初学者，我试图把我的头脑集中在何时使用this.prop或者只是传递道具的概念上，而不是在React中这样做。
在一些源中，编码器总是使用this.prop，而在另一些源中，这似乎是不必要的。有谁能澄清一下吗？
在本例中，我们将道具用户名、创作、注销和标题从应用程序传递给。为此，我们使用this.props。每次我们进口。
然而，在本例中，(Reactinative)，我们将术语onTermChange和onTermSubmit从搜索屏幕传递到搜索栏，而不使用this.props。然后，我相信我们在搜索栏的TextInput中重新定义了我们的道具，因此它的onEnd
浏览 6提问于2020-05-30得票数 0
1回答
是否有一个函数可以在我的gutenberg块中创建自定义块？
wordpress、reactjs、block、jsx、wordpress-gutenberg
我正在制作一个滑块，我想为我选择的每个图像创建一个滑块。 我已经有了一个功能齐全的滑块。问题是，我如何从滑块创建调用滑块？我想肯定有一种方法可以通过API，我找到了函数createBlock()，但是什么都没有真正起作用。 const { createBlock } = wp.blocks;
//
// some code
//
<div id={ listId } className={ classes } key={ index }>
{createBlock('illmatic6514/slide')}
</div> 我期待着创建一个滑块。(
浏览 12提问于2019-02-13得票数 0
回答已采纳
2回答
将组件从一种类型更改为另一种类型
javascript、reactjs
我现在有一个React组件.下面是代码：
import React, { PropTypes } from 'react';
export default class Message extends React.Component {
constructor(props) {
super(props);
}
render() {
const { type } = this.props;
if (type === 'success') {
return (<div>{this.props.msg}&
浏览 0提问于2017-04-19得票数 1
回答已采纳
1回答
React + Redux自组织加载器
javascript、html、css、reactjs、redux
我有一个重复代码的问题，我正在尝试修复一个点。在我的React应用程序中，我有许多页面需要redux的道具才能完全加载。我一直在用一种简单的方法来解决这个问题，要么为this.props.something添加一个switch语句，要么呈现一个加载器。我试着创建了一个临时的，但我认为我的逻辑是错误的。如果你能帮助我，我将不胜感激。
以下是一个路由示例
import React, { Component } from 'react';
import { connect } from 'react-redux';
import LoaderHOC from '
浏览 0提问于2018-11-02得票数 0
1回答
Reactjs -将表行拆分为两行-字段对齐不正确。
reactjs、html-table
我想把表行分成两行。因此，我在()方法中写入了两个tr标记。能够拆分行，但其对齐方式不正确。
所有字段都呈现在第一列本身中。我怎样才能正确地把桌子分开。
Am使用Reactjs V 15.6.1
class Details extends React.Component {
constructor(props) {
super(props);
this.state = { item: props.item };
}
render() {
return (
<table cla
浏览 4提问于2017-11-15得票数 0
回答已采纳
2回答
比较同一对象中的2个数组键和值
javascript、reactjs
我目前正在开发一个使用Firebase (实时数据库)和ReactJS的应用程序。我有以下几点：
我想在sellersList中检查那些为真的值。对于每个为true的值，我想要在sellers数组中检查包含与"name : XXX“键值对中第一个数组中的键相同的值的项。
例如:如果我有“耐克”和“彪马”作为true，我想在卖家数组中检查名称值为“耐克”和“彪马”的物品，并返回整个父对象(这样我就可以访问头像、链接等)。
编辑:这是我完整的组件代码：
import React, { Component } from 'react';
import Popup f
浏览 41提问于2020-08-02得票数 0
回答已采纳
2回答
如何映射javascript/ reactjs中的对象并依次使用其键和值
javascript、reactjs
我正在尝试使用来自一个对象的数据，该对象是通过合并两个数组而生成的，在生成一个对象之后，我仍然停留在如何映射该对象的部分？
这是javascript:-
class CampaignIndex extends Component {
static async getInitialProps() {
const campaigns = await factory.methods.getDeployedCampaigns().call(); //first array of dataset
const data = await factory.methods.getDepl
浏览 7提问于2022-05-19得票数 -1
5回答
将react组件作为道具传递
javascript、reactjs
假设我有： import Statement from './Statement';
import SchoolDetails from './SchoolDetails';
import AuthorizedStaff from './AuthorizedStaff';
const MultiTab = () => (
<Tabs initialIndex={1} justify="start" className="tablisty">
<Tab title="F
浏览 65提问于2016-09-23得票数 125
回答已采纳
2回答
如何在React中通过Link传递道具(this.props.location未定义)
javascript、reactjs、components
我正在创建一个食谱研究项目的反应。在主页上，我按下‘搜索配方’，它会为我找到它们，然后‘查看食谱’，它应该给我一些我必须决定的数据。在组件中执行console.log (this.props)时，它将返回所有对象，而不需要状态值，因此无法访问数据。你能帮帮我吗？我把密码留给你以便更好地理解。
import logo from "./logo.svg";
import "./App.css";
import React, { useState } from "react";
import MealList from "./MealList&
浏览 9提问于2021-12-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
