在React JS中访问大括号内的道具
在React JS中，大括号内的道具指的是组件的属性（props）。属性是组件之间传递数据的一种方式，可以通过大括号访问和使用。
在React中，组件可以通过props对象接收父组件传递的属性值。大括号内的道具可以用于在组件内部访问和展示这些属性值。
例如，如果有一个名为"Hello"的组件，可以通过以下方式在组件中访问大括号内的道具：
function Hello(props) {
return <div>{props.name}</div>;
}
ReactDOM.render(<Hello name="John" />, document.getElementById('root'));在上面的例子中，我们将一个名为"name"的属性传递给"Hello"组件，并在组件内部通过大括号访问和展示这个属性值。
React中的大括号内的道具可以用于在组件中展示动态数据、传递回调函数等。通过使用大括号内的道具，可以实现组件之间的数据传递和交互。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：安全、稳定、高扩展性的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
相关·内容
我正在尝试在布局中渲染返回按钮，如果单个帖子正在显示。我尝试在gatsby-node.js中的create页面上传递pageContext属性 result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: blogPostTemplate,
context: {singlePost:true}, // additional data can be passed via
浏览 20提问于2019-02-10得票数 0
回答已采纳
我想将this.state从"main.js“(父组件)传递到"bar.js”(子组件)。
//main.js
import React, { Component } from 'react';
import BarChart from './Bar-chart';
class Hero extends Component {
constructor(props) {
super(props);
this.state = {
labels: ['P1', 'P2&
浏览 3提问于2016-05-13得票数 1
回答已采纳
我试图在我的站点中的购物车图标中更新徽章上的数字，并将totalItemls={cart.total_items}作为道具传递给navbar，但是它不会抛给我一个对象无效的错误。我正在使用commerce.js api和material。
我还有控制台记录了total_items，它输出了一个数字，我只想在导航栏的徽章中传递这个数字。
App.js
// import React from 'react';
// import Products from './components/Products/Products';
import { commerce
浏览 7提问于2022-01-06得票数 1
回答已采纳
我想使用扩展操作符来设置组件道具。这主要是因为我不想为每个道具值使用state。这个是可能的吗？下面的代码返回一个错误，说明道具丢失了。提前感谢！
const compProps = {
label: 'Test Label',
value: 'Test Value',
icon: 'test-icon'
}
<CustomComp {...compProps} />
更新：
我使用TS on react，作为强类型语言，它不允许我有一个未定义的道具作为初始值。我通过先检查道具来解决这个问题。
{ comp
浏览 8提问于2021-10-06得票数 4
2回答
我在努力学习反应。我在使用花括号时遇到了麻烦。在下面的代码中，使用大括号会使JSX和JS有所不同，CurlyBrace1说“现在是JS了”。为什么有卷发支撑2？它已经在一个卷曲支撑区里了？
var React = require('react');
var ReactDOM = require('react-dom');
var MyCompClass = React.createClass({ // open curly brace 1
render: function () { // open curly brace 2
return <
浏览 5提问于2017-05-25得票数 1
1回答
我正在尝试将数据从我的状态加载到我的表单中，并且正在挣扎。
我登录并保存电子邮件和令牌到Redux状态。当我推到这个包含表单的测试页面时，我无法在表单中显示电子邮件。为什么我不能加载电子邮件？我可以在TestPage.js上看到，但在TestForm上看不到。
TestPage.js
import React from "react";
import PropTypes from 'prop-types';
import { connect } from "react-redux";
import TestForm from "../f
浏览 1提问于2018-05-04得票数 0
回答已采纳
我正在学习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
回答已采纳
1回答
我试图将一些行数据从列表传递到下一个屏幕，以显示详细信息，但似乎无法实现。在导航时，我就是这样通过道具的：
_renderRow(row,sectionId, rowId, highlightRow) {
var self = this;
let navigate=this.props.navigation;
return (
<TouchableOpacity onPress={() => navigate('ChatList',{row})}>
..
浏览 1提问于2017-06-19得票数 1
回答已采纳
2回答
学习react/nextjs...我有一个简单的主布局，包括两个组件-页脚和页眉。 function MainLayout(children) {
return(
<div>
<Header />
{children}
<Footer />
</div>
);
}
export default MainLayout; 我希望这个布局位于主页面中，如下所示： import {default as Layout} from &#
浏览 12提问于2021-09-30得票数 0
回答已采纳
我有一个名为message.js的文件，在Render的message.js上我有一个名为<Audio>的组件。这个组件是用来播放一个音频是在一个网址在Firebase，我有这个网址在我的message.js，我需要传递给我的音频，我使用了以下代码：<Audio sUrl={this.sAudioUrl} />。为了在我的音频中访问这个网址，我使用以下代码：this.props.sUrl。问题是:我只能在Audio类内部访问url，如果我试图在它外部使用，我得到了以下错误：undefined is not an object (evaluating 'this.
浏览 19提问于2018-01-10得票数 0
回答已采纳
我正在上初学者关于反应js的课程。我遇到了类组件，我想知道props对象是如何初始化的。
例如：
主要组件：
class App extends React.Component {
render() {
return (
<div>
<Header username="xyz"/>
</div>
)
}
}
头：
class Header extends React.Component {
render()
浏览 5提问于2022-04-14得票数 2
回答已采纳
2回答
我的父组件是我传递给子组件的函数:注意: Planetdata没有重定向，但我认为这并不重要 export default function LandingPage() {
function redirection(){
console.log("redirecting");
}
return(
<>
...
{planetData.map((planet) => (
<Planet planet={planet} key={planet
浏览 32提问于2021-11-15得票数 1
回答已采纳
刚接触react js，似乎可以理解为什么oncopy事件不能按预期工作。
HTML
<div id="container"></div>
<h1 oncopy="alert('copy1');">
I love react
</h1>
JS
var Hello = React.createClass({
render: function() {
return <div oncopy="alert('copy2');">I hate reac
浏览 0提问于2017-05-16得票数 1
3回答
因此，我正在使用React Bootstrap编写更大的代码，并且我正在处理一个从后端数据库工作的下拉列表。 <Dropdown>
<Dropdown.Toggle
variant="success"
id="dropdown-basic"
></Dropdown.Toggle>
&l
浏览 43提问于2021-04-26得票数 0
回答已采纳
1回答
我正经历着最糟糕的时刻，试图弄清楚如何在双重嵌套的子组件中使用react导航。我尝试过使用回调函数并将导航作为支持传递，但我无法理解。有人介意看看吗？
我尝试过使用回调，并将导航作为道具传递。我遇到了很多错误，比如“找不到道具，找不到导航等等。”我们非常感谢你的帮助。
//main function (App.js)
import React from 'react';
import Bar from "./Bar"
import { StyleSheet, Text, View, Image, SafeAreaView, Dimensions, Button
浏览 0提问于2019-07-01得票数 0
回答已采纳
2回答
我是新来的反应。我们能改变道具的状态吗？例如，我有2段代码
App.js
import React, { useState } from 'react'
import Print from '../components/Print/print'
const [text, setText] = useState("Hi");
<Print text = {text} />
print.js
import React, { useState } from 'react'
const Print = (props)
浏览 5提问于2021-12-29得票数 -4
回答已采纳
1回答
将数据传递给子组件ReactJS
、、、、
背景
我正在一个网站上工作，在那里我有父组件和子组件。下面的片段是一个Google包装器和一个Map组件。
代码
import React, { useEffect, useState, useRef } from "react";
// reactstrap components
import { Card, Container, Row } from "reactstrap";
// core components
import Header from "components/Headers/Header.js";
import Loca
浏览 2提问于2022-02-22得票数 0
嗨，所以我试图有条件地渲染一页游戏的三个方面中的一个，但我被困在了第一个障碍中。 import React, { useState } from "react";
function App() {
const [currentPage, setCurrentPage] = useState("Intro");
if (currentPage === "Intro") {
return (
<div className="App">
<Intro setCur
浏览 7提问于2021-11-19得票数 1
回答已采纳
当单击一行时，我创建了一个Flatlist，导航到细节屏幕。
我创建了4个文件。
file1：
index.js
import React from 'react';
import List from "./list";
import Detail from "./detail";
import { createStackNavigator, createAppContainer } from "react-navigation";
const AppNavigator = createStackNavigator({
Li
浏览 2提问于2019-04-18得票数 1
回答已采纳
请看下面的代码，由于某种原因，它抛出了"Logout is not a function“： logout.jsx： import React from 'react';
import { Link } from 'react-router-dom';
class Logout extends React.Component {
componentDidMount = () => {
this.props.onLogoutUser();
}
render() {
return (
<
浏览 41提问于2020-07-26得票数 0
2回答
在user.js文件中，道具是空的，我无法访问道具中的match。我不明白为什么props会以空对象的形式出现。
App.js文件
import "./App.css"
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
import Home from "./components/Home";
import About from "./components/About";
import User from "./
浏览 2提问于2021-11-09得票数 1
回答已采纳
我正在尝试将事件处理程序传递给父组件，因此我编写了以下代码： import React, { useState } from "react";
export default function App() {
const [val, setVal] = useState("");
function handleChange(event) {
console.log(event.target);
setVal(event.target.value);
}
return (
<div className=
浏览 11提问于2020-10-25得票数 1
回答已采纳
当我单击“特定”按钮重定向到该页时，该页没有显示内容。
当我选中View => Developer => Developer Tools => console时，它会在下面显示错误文本：
Uncaught : items.map不是ShoppingCart.js:6:1的一个函数
在mountMemo (react dom.Development.js:15846:1)
在Object.useMemo (react dom.Development.js:16219:1)
在useMemo (react.development.js:1532:1)
在ShoppingCart
浏览 12提问于2022-10-05得票数 1
回答已采纳
1回答
在URI本机中，我正在创建一个名为ImageSelector的功能组件，在该组件中，我使用expo-图像选择器，并使用Formik将图像URI作为父组件中的必需字段。我的模拟器可以工作，并且我能够成功地选择一个通用映像并在控制台中记录图像URI ('success：‘+ result.uri)，但是这里有以下错误：
我想在下面的图像组件中显示图像，但是图像不显示(它不会中断)。我得到了以下错误，未处理的承诺拒绝: ReferenceError:无法找到变量:道具，我想它指的是父表单组件，但我不知道要更改什么才能使这个错误消失。
父组件
import { View, Text, Butt
浏览 3提问于2020-05-15得票数 0
1回答
我正在处理react redux示例：
redux存储是在setup.js中创建的，如下所示：
关键部分：
const initStore = ({onRehydrationComplete}) => {
store = createStore(
combineReducers({
...reactDeviseReducers,
cats: [],
form: formReducer,
router: routerReducer,
apollo: apolloClient.reducer()
}),
浏览 2提问于2017-05-24得票数 0
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
回答已采纳
以下代码在我的expo React本机项目中工作得很好：
const AppNavigator = createSwitchNavigator({
Loading:Loading,
Auth: AuthenticationNavigator,
Main: MainNavigator
});
const AppContainer = createAppContainer(AppNavigator);
class App extends React.Component {
render() {
return <AppContainer/&g
浏览 2提问于2019-02-25得票数 0
回答已采纳
我希望应用程序检查是否有一个用户登录(防火墙身份验证)。如果存在，请导航到一个页面(isn导航v5)，如果没有，导航到另一个页面。
我有以下代码：
在App.js中
//import navigation + screens
const Stack = createStackNavigator();
const MaterialBottomTabs = createMaterialBottomTabNavigator();
class App extends React.Component {
AuthStack = () => {
<Stack.Navi
浏览 1提问于2020-12-30得票数 2
回答已采纳
2回答
我最初使用的是来自react-router的react-router，并以编程方式使用this.props.history.push()导航我的React应用程序。但是，随着从HashRouter包开始使用react-router-dom，this.props.history.push()现在抛出一个Cannot read property 'push' of undefined错误。
现在如何使用HashRouter以编程方式导航？
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvid
浏览 2提问于2017-05-26得票数 7
回答已采纳
在react.js的JSX中，如何在HTML标签旁边写this.props.element？
? this.props.element (<span className="edit" onClick={()=> {this.props.makeInputBox(this.props.item)}}>Edit</span>):
我得到下面的错误
TypeError: this.props.element is not a function
浏览 30提问于2018-07-25得票数 0
回答已采纳
我目前正在开发一个ReactJS网络应用程序(新手)。我用的是反应路由器v4和。
我想知道如何从我的routes.js文件中的存储中访问状态的当前值。从商店返回的值为"true“或"false”。我希望访问该状态的值，以便在我的auth_status文件中的常量PrivateRoute中验证“=== true”条件。
简而言之，来自我的verifyAuth文件的一个名为authActions.js的操作是从我的Login.js文件中发出的。有效载荷从那里设置为"true“或"false”。我想从我的isAuthenticated文件中检索authReducer.
浏览 0提问于2018-07-19得票数 0
回答已采纳
我在一个react组件中有三个map，其中两个是嵌套的。内部不执行任何JSX语句。下面，正如你所看到的，有一个嵌套的映射，一个外部的，一个内部的，我也尝试了console.log，但是没有成功。它基本上是一个有子类别的集合类别。它列出了标签中的类别，当我单击每个标签时，它应该在链接中显示每个类别的子类别。 import React, { Component } from 'react';
import {withRouter} from 'react-router'
import { Tab, Tabs, TabList, TabPanel } from &#
浏览 18提问于2020-06-27得票数 0
1回答
我在研究文件里的反应。当我传输由状态传递的数据时。例如：getInitialState()我得到了一个错误：
无法读取未定义的属性“数据”
我试图将getInitialState()更改为this.state = { data : []}。然而，这并不是正确的方式。我怎么才能修好它？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React</tit
浏览 6提问于2016-10-12得票数 1
回答已采纳
3回答
在其他页面中使用道具
、、、
今天，我正在使用一个React/Gatsby网站。我想在每一页上做一个横幅。我想制作一个组件并使用一个参数。我用我的照片作为参数。
但是每次我收到错误：“不能读取未定义的的属性‘支持’”
Index.js：
<Banner image={<image parameter>} alt="..."/>
在我的Banner.js上：
import React from 'react';
const Banner = () => {
return (
<img src={ this.props.image } cla
浏览 4提问于2020-01-20得票数 0
回答已采纳
我正在尝试在我的React.js应用程序上实现React.js路由器，但是当我将路由器添加到我的程序中时，我就开始收到一个奇怪的错误。
ReactDOM.render(
<BrowserRouter>
<App />
<Route path="/" component={Headline}></Route>
<Route path="/economy" component={Economics}></Route>
</BrowserRouter&
浏览 2提问于2020-10-30得票数 0
回答已采纳
我在App.js中创建了一个重置函数，并希望通过另外两个组件中的onclick调用它。问题是它在一个组件中工作，而在另一个组件中不工作。
这是代码片段
App.js
import React from 'react';
import Result from './components/Result';
import GeneralResult from './components/GeneralResult';
class App extends Component {
constructor(prop
浏览 2提问于2019-04-09得票数 0
/这是主屏幕，在这里我尝试转到“组件”。它不能识别'props.navigation.navigate
import React from 'react';
import { Text, StyleSheet, View, Button, TouchableOpacity } from 'react-native';
const HomeScreen = props => {
return (
<View>
<Text style={styles.text}>Hi there !</Text&
浏览 2提问于2019-09-10得票数 0
2回答
亲爱的朋友，我正在试图覆盖一个方法，在反应本机组件，请让我知道我如何能够做到这一点。
// BaseButton.js
import React, { Component } from 'react'
import { View, Button } from 'react-native'
export default class BaseButton extends Component {
onPress = () => {
console.log('Test')
}
render()
浏览 1提问于2020-09-25得票数 0
回答已采纳
我是react.js的新手，react-admin吸引了我的眼球来使用它。但是我有一个关于它正在使用的端点的问题
http://localhost:3333/verifications/browse?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22ASC%22%5D
是否可以删除过滤器参数？因为我想使用我的api，它是
http://localhost:3333/verifications/browse?page=1&per_page=10&verification_level_id=1&ver
浏览 6提问于2021-06-10得票数 0
我是新的react本地用户，我在react导航方面有问题。我不知道如何从家导航到Screen1。Home包含来自2个js文件的2个组件。当运行应用程序时，我们从家里开始使用2个组件，然后从家里单击TouchableOpacity，然后导航到Screen1，但是它不能使用下面的代码
文件Home.js
import React, { Component } from 'react';
import { View } from 'react-native';
import Component1 from './Component1';
import
浏览 0提问于2018-12-01得票数 0
回答已采纳
我的项目没有任何错误，它只是没有渲染任何东西。我是不是遗漏了什么？
在App.js中，我使用渲染道具进行数据传输。
import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Auth from "./views/Auth";
function App() {
return (
<div className="App">
<Router>
浏览 0提问于2021-11-15得票数 3
回答已采纳
我正在使用redux设置一个简单的React应用程序。我可以访问我的存储并将它们作为道具传递到组件中，但我似乎无法让组件识别mapDispatchToProps中的函数。我只想在子级中使用onClick调用函数searchCompany。任何建议都是值得感谢的。 下面是父组件： class ResearchContainer extends React.Component {
render() {
return <CompanyFinancials test={this.handleTest} props={this.props} />
}
}
浏览 20提问于2021-02-01得票数 1
1回答
我正在尝试构建一个应用程序，使用react下拉区域来处理文件上传。我已经为这个错误绞尽脑汁好几个小时了。
警告:错误的道具类型:无效的支柱children类型array提供给Dropzone，预期function。在Dropzone (at MyEditor.js:145) in MyEditor (at App.js:15) in div (at App.js:14)在div (at App.js:10) in App (at src/index.js:7) function.console(匿名函数)@ index.js:1446 printWarning @ checkPropType
浏览 0提问于2019-02-21得票数 0
在react中，特别是引用钩子/函数范例，您什么时候需要使用props.functionName？据我所知，如果函数名相同，您可以省略以下道具：
Parent.js
...
<Child functionName={functionName}/>
...
Child.js
...
functionName();
...
但是，如果名称更改，则必须按以下方式引用道具：
Parent.js
...
<Child otherName={functionName}/>
...
Child.js
...
props.otherName();
...
我说的对吗？如果是，为什么要使
浏览 3提问于2022-03-20得票数 0
回答已采纳
1回答
我是React.js的新手，最近了解了npm包react-router-dom (5.0.0)。我想通过Route中的props来传递仪表板组件中的数据。如下所示(显示错误)： <BrowserRouter>
<NavBar/>
<Switch>
<Route exact path="/" component={Dashboard} >
<Dashboard Project={Something}/>
</Route>
<Route path=
浏览 12提问于2019-04-17得票数 0
回答已采纳
1回答
我有一个困难的时间传递变量到一个类的反应-本机。我可以将变量作为函数之间的“支持”发送，在函数中使用“props”参数将接受从另一个函数向前推进的变量，例如：
Details.js
import React, { useState } from 'react'
import { Button, StyleSheet, TouchableOpacity, Text, View } from 'react-native'
import { Actions } from 'react-native-router-flux'
const Detai
浏览 3提问于2022-02-28得票数 1
为了便于管理，我拆分了这个组件。在拆分之前，一切都像预期的那样工作，拆分后，当我点击一个调用createReactionsIcon的图标时，我得到了一个错误。错误显示 TypeError: updateReaction is not a function
onClick
./components/home/components/SingleUpload.jsx:26
23 |
24 | return icons.map(({ key, text, type }) => (
25 | <IconText
> 26 | o
浏览 32提问于2019-05-20得票数 0
我看过类似的问题，但似乎没有一个解决方案对我有用，这已经困扰了我两天了。
这个错误似乎来自于将this.props.navigate传递给exerciseList.js，但是我尝试过的一切都不起作用。因此，任何建议都将不胜感激。当我通过exerciseList.js单击单独呈现的文件时，会发生错误。
错误消息：
undefined is not a function (evaluating '_this2.props.navigate('Exercises', { exerciseName:ex})')
package.json
"depend
浏览 0提问于2019-02-21得票数 0
回答已采纳
1回答
如流程图()中所示，如果主组件呈现登录组件，则需要隐藏标头组件。但是，如果主组件呈现主组件，则需要显示头组件。
这是App.js文件：
import React from 'react'
import Header from 'Header'
import Main from 'Main'
import Footer from 'Footer'
function App() {
return (
<div className="App">
<Header /&g
浏览 4提问于2021-01-22得票数 2
有办法用MenuItem嵌套下拉组件吗？当我需要使用下拉列表而不是嵌套两个时，我想声明一个组件。我是在正确的路径上，还是应该以与正常反应组件不同的方式处理下拉组件？
App.js (目前正在DropDown中嵌套MenuItem )
<DropDown
label="Drop Down Label"
value={this.state.selectedState}
onChange={this.handleChange}
>
{stateAbbreviationData.map(option => (
<MenuItem key=
浏览 1提问于2018-05-05得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
