react.js中的道具问题
React.js中的道具问题是指在React组件中如何传递和使用属性（props）的问题。道具是React中用于传递数据和配置信息的一种机制，它允许将数据从父组件传递给子组件，并在子组件中使用这些数据。
React中的道具是只读的，即父组件传递给子组件的属性在子组件中不能被修改。子组件可以通过访问this.props对象来获取传递过来的属性值。
道具在React中有以下特点：
- 道具是单向数据流：属性是从父组件向子组件传递的，子组件不能直接修改父组件的属性。
- 道具是只读的：子组件不能修改接收到的属性值，只能使用它们。
- 道具可以是任何类型的数据：可以是基本数据类型、对象、函数等。
在React中，可以通过在组件标签上添加属性来传递道具。例如：
<ChildComponent propName={propValue} />在子组件中，可以通过this.props.propName来访问传递过来的属性值。
React中的道具可以用于以下场景：
- 传递数据：父组件可以将数据传递给子组件，子组件可以使用这些数据进行渲染或执行其他操作。
- 配置组件：父组件可以通过属性来配置子组件的行为，例如传递回调函数、事件处理程序等。
- 复用组件：通过将不同的属性传递给同一个组件，可以实现组件的复用。
腾讯云提供了一些与React.js相关的产品和服务，例如：
- 云开发（CloudBase）：提供了云函数、数据库、存储等功能，可以用于支持React.js应用的后端开发和部署。详情请参考：云开发产品介绍
- 云服务器（CVM）：提供了可扩展的虚拟服务器实例，可以用于部署React.js应用的前端和后端。详情请参考：云服务器产品介绍
- 云数据库（TencentDB）：提供了多种类型的数据库服务，包括关系型数据库和NoSQL数据库，可以用于存储React.js应用的数据。详情请参考：云数据库产品介绍
以上是对React.js中的道具问题的简要介绍和相关腾讯云产品的推荐。如需了解更多细节和深入内容，建议参考React.js官方文档和腾讯云官方网站。
相关·内容
1回答
传递参数以使用ES6响应组件
、、、、
我正在尝试创建一个带有react.js库“react.js”()的可排序列表。
在"SortableList“中，我在数组的每个元素上映射一个函数，这些元素(应该)使用参数键、索引和值创建一个"SortableElement”。"SortableElement“就是这样定义的：
SortableItem = SortableElement(({value,key}) =>
<Row>
<this.DragHandle/>
<ControlLabel>Question</ControlLabe
浏览 3提问于2017-01-30得票数 1
回答已采纳
1回答
我试图在localhost上打开一个简单的网页:3000，并且正在使用React.js --目前看来，使用React.js时，当我键入'=>‘时，它没有识别我的箭头函数，并且我已经查看了一个教程，以确保我没有做任何输入--还有其他人遇到了React.js和箭头函数的问题吗？
有趣的是，在我正在看的教程中，它运行得很好，
事先非常感谢！
重新检查代码，选中App.js，谷歌搜索React.js中的箭头函数错误
Greet.js代码如下：
import React from 'react'
// function Greet() {
// return &l
浏览 1提问于2019-04-14得票数 0
回答已采纳
我想创建自己的组件，所以我看了一下antDesign，它是React.js最流行的库之一。
我的问题是，我如何创建自己的自定义按钮组件，而不使用react.js中的任何CSS库或框架(Bootstrap、react.js等)，比如antDesign团队如何创建它。
任何帮助将不胜感激的一些解释和一个例子。
浏览 5提问于2019-11-05得票数 2
回答已采纳
在余烬中，我可以写这样的东西：
statusChanged(){
//...do some code
}.observes('observableProperty')
在React.js中做类似工作的正确方法是什么？
浏览 7提问于2016-03-18得票数 0
回答已采纳
在将jetstream中的vue文件转换为react.js文件时，我在模板标签中发现了#，我认为它与Laravel组件有关，但我不知道如何在react.js组件中编写它。 在Vue中 <template #trigger>
<template #content> 在livewire中 <x-slot name="trigger">
<x-slot name="content"> 在React.js中有什么等价物呢？
浏览 16提问于2021-04-08得票数 0
回答已采纳
这是react.js中的示例：
Form.jsx
<FormInput
type='text'
name='displayName'
value={displayName}
onChange={this.handleChange}
required
/>
Input.jsx
const FormInput = ({ handleChange, ...otherProps }) => (
<input className="form-input" onChange={handleChange} {...ot
浏览 3提问于2020-09-30得票数 0
回答已采纳
我遵循了一个教程，并使用react.js编写了这个react.js。
我和道具和国家混淆了。在save方法的Note component中，这一行是做什么的
this.props.onChange(this.refs.newText.value, this.props.id)
在代码的其他地方，我没有看到onChange和onRemove函数，这是react的预构建函数吗？如何知道DOM被更改或删除？
浏览 4提问于2016-10-01得票数 5
回答已采纳
这个问题在这里已经有答案了： 了解React.js中数组子对象的唯一键 (14个答案) 5天前就关门了。 {storeAvailableHours.map((e,i) => {
return(
{setOrderIndex(i)}} >
{e.dayOfWeek}
)
})} 大家好。我得到了一个警告“警告:列表中的每个孩子都应该有一个唯一的
浏览 29提问于2021-02-25得票数 -4
回答已采纳
在React.js中，有没有办法将所有道具还原为它们在getDefaultProps()中的值？
我认为这可以通过使用state来控制，我对此持开放态度。我试着看看我是否可以在默认属性和更新后的属性值之间切换，而不需要states本身。
浏览 1提问于2015-09-28得票数 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
回答已采纳
我继承了一些代码，并且一直在操作它，但是我遇到了一些让我抓狂的东西。
我不确定我正在讨论的问题是否具体涉及到react.js，或者更广泛地说是与CSS /javascript有关.
在这段代码中，我们使用react.js withStyles。
我已经设置了一个来演示。
首先，在文件中，我们定义了一些样式，然后可以应用到页面元素中。
const styles = theme => ({
buttonGroup: {
width: "250px",
display: "flex",
flexWrap: "wrap"
浏览 2提问于2018-07-29得票数 1
回答已采纳
2回答
你好，我是react.js的新手。 我想在子组件中创建函数，并在父组件中使用它。 在父组件中， import ListReport from './Child';
... 这是子组件。 const ListReport = (props) => {
const dataval = props;
const keys1 = [];
for (const item of dataval){
for (const var1 of Object.keys(item)){
keys1.push(var1)
}
};
...
r
浏览 34提问于2021-03-01得票数 -2
回答已采纳
1回答
我目前正在测试，我有一个我无法解决的问题。基本上，我想在单击onClick之前从div.btn中更改它的值。javascript代码在react.js和可用的中。我想要改变的部分是：
React.createElement("div", {className: "img"},
React.createElement("div", {className: "btn noShadow", onClick: this.sendVote.bind(this, this.props.d
浏览 2提问于2015-07-09得票数 1
CMS将一个变量作为data-rest-url属性传递给React.js应用程序：
<div id="reactjs-root" data-rest-url="http://my-ip-addess:8080/Rest-api-here">...</div>
如果我将jQuery添加到我的React.js应用程序中，那么我可以简单地：
componentWillMount() {
const $reactRoot = $('#reactjs-root');
const restUrl = $reactRo
浏览 24提问于2017-03-14得票数 10
回答已采纳
1回答
使用React.js时
为什么我得到`ref` is not a prop & `key` is not a prop.错误
备注
但是，我没有在webpack开发服务器上运行这个错误。
我没有在我的任何反应组件中定义ref或key。
浏览 10提问于2016-06-29得票数 10
我对react.js并不熟悉，我正在尝试math.random一个数字并将其放入this.props.firstCard属性中，但它返回未定义的值。我尝试了一些变量，但只有结果是未定义的或语法错误。代码：
handleClick() {
let firstCard = this.state.isFirstCardChosen;
function chooseCard() {
return Math.floor(Math.random() * (80 - 1) + 1);
}
if (firstCard == false) {
this.props.firstCard = chooseC
浏览 4提问于2016-12-27得票数 0
回答已采纳
我正在用openweathermap构建一个使用React.js的天气应用程序。
我从openweathermap的远程服务器上获取数据，但是，在呈现组件及其子组件时，它并不是在我发现更容易使用的结构中。即，数据对象的子部分是一个5天3小时的预测数据，其形式是一个对象数组，每个子部分是连续5天的3小时预测。因此，该数组不分隔为天，因为每天也是其3小时数据的数组，每个数组都是一个对象，我将发现它很容易在单独的days组件中呈现。
我的主要观点是：
在React.js组件中，哪里是修改要用于呈现的组件的状态的最佳位置，如果数据的结构处于状态(在http请求到api或文件读取之后)不适合您的需要，或
浏览 2提问于2015-09-15得票数 0
回答已采纳
我有一个基于TypeScript的ReactJS项目。下面就是一个这样的文件: Layout.tsx
import React from 'react';
import { Helmet } from 'react-helmet-async';
import NavigationBar from './navigation/NavigationBar';
import Footer from './footer/Footer';
const Layout = ({ title, description, children })
浏览 187提问于2021-02-26得票数 1
1回答
我对react.js非常陌生，我想使用react js来准备折线图，而不使用其他js文件。
可以只用react.js创建一个吗？
在互联网上展示的例子有D3组件、chart.js等。我不确定这些是否是react.js的子产品。我希望尽可能避免其他js文件，只使用react.js。
浏览 0提问于2017-09-07得票数 2
这就是屏幕的样子。无论键入什么名称，都将显示在"Hi“之后，和评级部分将在之后显示”“。
这是我的代码(对不起，不知道如何在代码片段中粘贴本机代码
我所犯的错误。有趣的是，它适用于React.js。但是当我转到本机时，它给了我这个错误，所以我认为我没有做正确的事情，特别是e.target.value部分。
浏览 2提问于2018-10-30得票数 0
4回答
反应式JS中组件间的切换
、、、、
我想要创建一个简单的流，有两个组件。第一个组件被呈现，我单击它上的一个按钮，这个操作呈现第二个组件。单击第二个组件中的按钮，它应该切换回第一个组件，但是出现了一个错误：
警告: React.createElement: type不应为空、未定义、布尔或数字。它应该是一个字符串(用于DOM元素)或一个ReactClass (用于组合组件)。检查exports.warning的呈现方法react.js:9853t.exports.React.createClass.render react.js:9853t.exports.React.createClass.render bundle.js:1
浏览 7提问于2015-12-03得票数 11
在开始使用React.js之后，props似乎被设计为静态的(从父组件传入)，而state则根据事件进行更改。但是，我在文档中注意到了对的引用，其中特别包含了这个示例：
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
这似乎意味着，根据nextProps与this.props的比较，组件的属性可能会发生变化。我遗漏了什么？道具是如何改变的，还是我搞错了它的调用位
浏览 79提问于2014-07-25得票数 255
回答已采纳
我正在为React.js在线学习一个关于受控输入的教程，并且我正在反复地获取错误
TypeError:无法读取未定义的属性“映射”
import CallRow from "./CallRow";
import React from "react";
class SearchPage extends React.Component {
constructor() {
super();
this.state = {
search: "Level Up"
};
}
updateSearch(
浏览 1提问于2019-09-11得票数 2
1回答
我正在为React.js做一个项目。如何屏蔽IP地址？我用的是软件包。你能帮帮我吗?
<MaskedInput
mask="111.111.111.111"
name="card"
size="20"
formatCharacters={{
'W': {
validate(char) { return /\w/.test(char ) },
transform(char) { return char.toUpperCase() }
}
}
}
/>
浏览 1提问于2017-02-15得票数 0
回答已采纳
1回答
我试图更改MUI对话框的表索引。
当我使用Dialog时，我看到这个html标记是生成的。
<div class="MuiDialog-container MuiDialog-scrollPaper" role="none presentation" tabindex="-1" style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
// Children
</div>
在父div包装器中，-1被设
浏览 24提问于2021-12-19得票数 0
回答已采纳
1回答
我正在用React.js创建一个彩票应用程序。有一个SVG格式的旋转轮。你可以旋转一个车轮，它平稳地停在一个给定的位置(我的应用程序使它随机位置)。
我使轮子成为您使用的React.js组件，如下所示：
<Wheel items={items} fullSpins={5} angle={0} />
参数如下：
数组项
车轮的各个部分，定义它们的颜色、比例等。
int fullSpins
在请求的角度停止之前，车轮旋转了多少次。这是为了视觉的吸引力和更多的刺激。
浮子:0.360角
车轮即将停止的角度，以度表示。
我希望任何其他组件都能旋转方向盘，所以我
浏览 0提问于2018-03-27得票数 0
2回答
我正在学习一个react.js教程，他们使用:console.log(道具)来帮助解释。我正在使用Chrome，切换到开发人员工具和控制台日志。Props是一个传递给函数的对象，它在代码中工作。在控制台日志中，我得到的所有信息都是object object，我希望看到该对象的当前内容。 我遗漏了什么？
浏览 35提问于2019-05-20得票数 0
回答已采纳
2回答
Splice()方法无效
、、、
在我的React.js应用程序中，我对splice()方法有一些问题。
那么，.删除现在不起作用。这里怎么了？守则的一部分：
class CardList extends React.Component {
static propTypes = {
students: React.PropTypes.array.isRequired
};
// ADD DELETE FUNCTION
deletePerson(person) {
this.props.students.splice(this.props.students.indexOf(person), 1)
浏览 2提问于2016-04-17得票数 2
回答已采纳
在学习BrowserRouter，时，我尝试学习一个教程，我遇到了一个问题，因为本教程使用的是一个较早版本的React.JS，并且我一直试图弄清楚如何使用React.JS Routes和Routes。
有人能帮助我重新构造代码，这样它才能与React的更新版本一起工作吗？我试着阅读文档，尝试混合几个解决方案，但没有成功。任何帮助都是非常感谢的！
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import "bootst
浏览 2提问于2021-11-20得票数 1
我目前正在将我的React.js项目转换为Next.js。
不过，目前我在道具上遇到了一些问题。
以前，我在app.js上进行了API调用，然后将其传递到navbar中，以便在搜索表单中使用。
对于Next.js，没有真正的选项，因为_app.js文件中的API调用被阻塞。这就是我的layout.js (Nav/Footer)的地方。
我正在考虑的选项：
将index.js文件的约定更改为与app.js而不是home.js页面类似。
将布局包装在每一页上，而不是包装_app.js，并在每一页上调用stock。
我觉得有一种更好的方法，只需调用API一次，并将其传递给所需的子程序
浏览 4提问于2021-09-18得票数 1
回答已采纳
大家好，谢谢你抽出时间。
我看到了一个关于lynda.com React.js的教程。但是，它使用了一种旧版本的React。他的代码：
render: function(){
return (
<div>
<Header title={this.state.title} status={this.state.status}/>
<RouteHandler {...this.state} />
</div>
)
}
但是我使用了一个新版本的Reactive15.2.1和React路由
浏览 2提问于2016-07-15得票数 1
回答已采纳
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
回答已采纳
2回答
我在我的项目中使用React.js。在外部获取函数方面，this.props有问题。这是我的密码
export default function request(method, url, body) {
console.log(this); //undefined here
if (method === "GET") {
body = undefined;
}
return fetch(url, {
method,
headers: {
"Content-Type": "application/json
浏览 0提问于2018-11-20得票数 0
回答已采纳
我正在使用React.js进行一个项目，并且对React的组成非常困惑。
上面的链接给出了一个例子。它使用React.creatClass()创建三个组件。父组件和两个子组件。父组件在呈现方法中包含它的JSX中的其他组件。
这个例子非常清楚，但并不是很“可重用”。如果我想在另一种情况下收养另一个孩子呢？React.js似乎缺乏像主干视图那样的‘扩展’方法。
稍后，我发现您可以在React.render()中传递子组件，并使用this.props.children进行组合。
var Tom = React.createClass({
render: function(){
浏览 0提问于2015-04-23得票数 2
回答已采纳
1回答
我正在开发一个react.js应用程序，其中有两个组件，如所附图片所示。下面的图片可以让这个解释更清楚一些。
我有一个组件ProfileScreen，它有三个组件要在applet中呈现。我在{children}组件中使用ProfileScreen关键字来基于components呈现多个组件。
<div className='mt-10 ml-10 mr-10'>
<div className="flex-row-fluid ml-lg-8">
{children}
</div>
</div>
浏览 0提问于2021-07-24得票数 0
我们正在决定如何在react.js中进行本地化，当然有办法进行本地化，但是您的建议是什么呢？
我试过雅虎的反应
var ReactIntl = require('react-intl') // we did npm install react-intl
// somewhere in the react component
render: function() {
return (<div><ReactIntl.Number>{600}</ReactIntl.Number></div>);
}
提供错误:无法读取未定义的属
浏览 8提问于2014-12-30得票数 6
回答已采纳
我正在遵循一个教程，使用ThirdWeb和react.js构建一个NFT市场。当我试图将ThirdWeb连接到Rinkebey测试网络时，我在_app.tsx文件中得到了以下错误：
Type '{ children: ReactNode; supportedChainIds: number[]; connectors: { injected: {}; }; }' is not
assignable to type 'IntrinsicAttributes & ThirdwebWeb3ProviderProps'.
Property 'child
浏览 23提问于2022-07-31得票数 1
2回答
在react.js教程之后，我得到了一个错误: Uncaught : Cannot read property‘TypeError’of undefined。 我有一个这样的状态： this.state = {
input: '',
array1:[{name:"john"}, {name:"Tom"}, {name:"Walt"}, {name:"Peter"}]
} 并将其作为道具分享给ResponseList组件 <ResponseList apiRes = {this.sta
浏览 27提问于2021-01-08得票数 1
回答已采纳
我想用react.js中的可内容div从头开始制作一个编辑器div是可编辑的，但是如何添加一个按钮使选定的文本粗体化呢？我尝试了“document.execCommand(‘粗体’，假的，空的)；”，但不能使它工作。
import React from 'react';
const Editor = () => {
return (
<div className="editor">
<div className="toolbar">
&
浏览 11提问于2020-09-07得票数 0
回答已采纳
1回答
反应约束法
、、、
在React.js中，最好在构造函数中定义方法绑定，如下所示：
constructor(props){
this.poo = this.poo.bind(this);
}
在呈现方法中，它的性能比绑定更好。
那么箭头函数呢？
poo = () => {}
它也会影响渲染方法中的性能吗？
浏览 3提问于2017-09-24得票数 3
回答已采纳
在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
回答已采纳
我想要创建一个可以使用flexible/dynamic呈现的React.js format格式。这种格式必须包括嵌套组。一个组可以包含其他组和问题。
var Group = React.createClass({
render: function(){
return (
<fieldset></fieldset>
);
}
});
var Text = React.createClass({
render: function() {
return (
浏览 3提问于2015-03-12得票数 13
回答已采纳
我正在尝试使用React.js创建我的第一个web应用程序。
我希望React执行客户端呈现，但是呈现的页面由服务器承载的数据库中的数据控制。
我应该如何传递这些数据以作出反应？
我是否必须使用我的数据的json表示形式预先填充服务器端的每个html页面？
或者可以直接从客户端访问我的数据库(或者使用RESTful API调用)？
更新: 001
我可以找到的所有示例都在node.js上安装了node.js。我可以在Apache™、、Jetty上使用REACT.js吗？
浏览 6提问于2015-05-03得票数 3
回答已采纳
3回答
许多模板语言都有“槽”或“产出”语句，它们允许进行某种控制反转，以将一个模板包装在另一个模板中。
Angular有。
Rails有。如果React.js有like语句，它将如下所示：
var Wrapper = React.createClass({
render: function() {
return (
<div className="wrapper">
before
<yield/>
after
</div>
);
}
});
var
浏览 3提问于2013-12-31得票数 208
回答已采纳
2回答
因此，我对React.js非常陌生，无法从路由模块呈现一个元素。控制台返回位于位置的叶路由没有元素，因此呈现空页。使用"element“函数的其他路由标记也正确工作，这个也是如此。这是来自App.js文件的片段
<Route
path="/"
render={(props) => (
<ContactList
{...props}
contacts={contacts}
getContactId={remove
浏览 2提问于2022-01-24得票数 0
回答已采纳
1回答
在Backbone.js中，可以通过使用el属性或调用view.setElement()来指定视图的元素。
是否有一种将React.js组件连接到现有DOM元素的等效方法？
浏览 3提问于2014-02-06得票数 6
回答已采纳
我正在用react.js中的Nivo (nivo(.dot)rocks)做一个流图。如何自定义工具提示？文档中没有提到这一点。
浏览 0提问于2020-06-09得票数 3
回答已采纳
当我运行我的React.js前端时，我会收到这样的警告：
index.js:1446 Warning: Failed prop type: The prop `children` is marked as required in `InputAdornment`, but its value is `undefined`.
in InputAdornment (created by WithStyles(InputAdornment))
in WithStyles(InputAdornment) (at TopControls.js:101)
in div (creat
浏览 0提问于2019-02-21得票数 2
回答已采纳
我正在使用typescript在react.js中创建一个组件。我被困了一段时间，想知道如何让两个prop中的任何一个成为强制性的。我正在创建一个Label组件。它应该在props中接收icon或title。我过去通过道具的方式是： import React, { forwardRef } from 'react';
import clsx from 'clsx';
export interface LabelProps{
className?: string;
onClick?: () => void;
icon: string,
t
浏览 9提问于2020-01-17得票数 2
回答已采纳
我目前正在学习React.js，我不熟悉React.js。我正在制作一个简单的todo应用程序，只是为了研究'CRUD'操作，当点击一个按钮时，我努力地做一个任务删除。我听说这是用过滤方法做的。正如我说的，我不熟悉React.js，所以我不能使用filter方法删除任务。
这里是我的代码
JSX
import "./style.css";
import { useState } from "react";
function App() {
const [toDos, setToDos] = useState([]);
const [to
浏览 1提问于2021-06-04得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
