传递给功能组件的属性会自动更改吗？
传递给功能组件的属性不会自动更改。在React中，组件的属性（props）是只读的，即组件内部无法直接修改传递给它的属性。如果需要在组件内部修改属性，可以通过在组件内部定义状态（state）来实现。状态是组件内部的可变数据，可以通过setState方法来更新状态，并重新渲染组件。
在React中，属性的传递是单向的，即父组件可以将属性传递给子组件，但子组件无法直接修改父组件的属性。这种单向数据流的设计有助于保持组件的可预测性和可维护性。
对于属性的更改，可以通过父组件更新属性的值，并将新的属性值传递给子组件。当父组件更新属性时，React会重新渲染子组件，并将新的属性值传递给子组件。子组件可以通过props接收到新的属性值，并在需要的时候进行相应的处理。
总结起来，传递给功能组件的属性不会自动更改，但可以通过父组件更新属性的值，并重新渲染子组件来实现属性的更改。
相关·内容
嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。
这是Button的代码，
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES =['btn--primary', 'btn--outline'];
const SIZE
浏览 2提问于2021-03-11得票数 0
我有一个简单的自定义钩子，它返回一些函数：
const useCustom = () => {
const someReduxValue = useSelector(...);
const fn1 = useCallback(() => {
// do something with someReduxValue
}, [...]);
const fn2 = useCallback(() => {
// may include some complex operations like reducing/mapping etc
浏览 7提问于2021-12-27得票数 0
1回答
在我的项目中，我有一个包含一些react代码的html文档，例如：
var Test = React.createClass({
getInitialState: function() {
return {storage: this.props.storage};
},
render: function() {
return (
<h2>
{this.state.storage}
</h2>
);
}
});
在另一个类AppMan中，我有一个名为storageLeft的属性。如果我像这样呈
浏览 0提问于2016-01-26得票数 0
最近，我决定刷新react的文档，并遇到了 (React.memo)。
乍一看，它看起来很适合我的所有功能组件。因此，我就这样做了，并将memo应用于所有这些程序。
我不确定我是否能注意到戏剧性的性能提升，但这肯定没有让任何事情变慢。
因此，问题是:在默认情况下，我是否应该将备注应用于我的所有功能组件，以防万一，这样我才能捕捉到重新呈现许多元素的边缘情况？这个/其他我需要注意的东西有什么缺点吗？
浏览 0提问于2019-01-03得票数 6
回答已采纳
2回答
我正在使用Formik构建一个用户输入表单。我正在使用withFormik处理我的表单。我目前在我的组件中传递我的handleSubmit，如下所示： export const CreateForm = withFormik({
mapPropsToValues: () => ({
primarySkill: "12"
}),
validationSchema: () => FormSchema,
handleSubmit: (values, { setSubmitting }) => {
setTimeout(() =&g
浏览 17提问于2019-06-24得票数 2
回答已采纳
1回答
我正在尝试使用App Engine数据存储(High Replication Datastore，HRD)，但我必须使用低级API。我以前从来没有使用过实体数据库，所以我有一些问题。我试着存储一些帖子和评论，每个帖子可以有更多的评论
I tried this code for Post, but the problem is how to make ID auto-increment ?
Entity post = new Entity("post", ID);
post.setProperty("content", postContent);
post.set
浏览 1提问于2013-06-27得票数 1
回答已采纳
1回答
我用这种方式制作了一个Blazor组件：
<input bind-value-oninput="Title" />
@functions {
[Parameter] string Title { get; set; }
[Parameter] EventCallback<string> TitleChanged { get; set; }
}
父级：
@page "/fetchdata"
Parent:<input bind-value-oninput="Title" /> - Chi
浏览 1提问于2019-05-14得票数 2
正如我在下面展示的，react子渲染每次它的父渲染时都会渲染。这是为什么，这是一个问题吗？另外，我怎样才能避免它，以致于只有当它的优点改变时，子对象才会重新渲染。 import React, {useEffect, useState} from 'react';
function App() {
return (
<div>
<Main></Main>
</div>
);
}
export default App;
function Main() {
const [count
浏览 38提问于2020-04-29得票数 1
2回答
我在Codeacademy上了React.JS课程。这个问题来自React.JS第二部分。我正在学习编程模式，但我不能理解这个模式是如何工作的
代码：
Parent.js
var React = require('react');
var ReactDOM = require('react-dom');
var Child = require('./Child');
var Parent = React.createClass({
getInitialState: function () {
return { name: '
浏览 7提问于2017-06-14得票数 1
我是新的反应，我没有得到任何答案，这一点。
我希望将数据从一个功能组件传递到另一个功能组件。但是，我不想呈现子组件。我只想把数据从一个组件传递到另一个组件。我怎样才能做到这一点？
请帮帮忙
一定有办法这样做的。
浏览 6提问于2022-09-14得票数 0
我有一个父组件A，其中设置了state和useState。父程序有两个子组件--组件B (接收useState作为支柱)和组件C (接收state作为支柱)。
因此，如果B运行setState，那么C应该重新呈现.一切都很好。我遇到的问题是，B也在重新呈现，尽管它没有将state作为一个支柱。理想情况下，我只希望C重新呈现。
另外，我不想将以前的state与当前的state进行比较，因为如果它是一个具有大量数据的重嵌套数组或对象，那么性能就会受到很大的影响。
有办法做到这一点吗？还是我必须使用类似于上下文API的东西呢？
代码示例：
// App.jsx - A
const App = ()
浏览 3提问于2020-07-15得票数 0
我正在优化应用程序的性能，我想知道是否对那些不依赖于任何变量的函数使用useCallback钩子。
考虑以下情况:假设我们有一些功能：
const someFunc = () => {
let someVar = "someVal";
/**
* here some extra calculations and statements regarding 'someVar'.
* none of the statements depends on a variable outside this function scope.
*/
浏览 3提问于2020-06-10得票数 10
回答已采纳
1回答
在下面的React组件中，我使用获取了更多的条目。
在这里使用的确切目的是什么？在这种情况下使用这个方法好吗？
const Carousel = ({ data: blockData, metadata }: Props) => {
const { data, fetchMore, networkStatus } = useQuery<
GqlRes,
>(GET_NODES, {
variables: {
offset
limit
},
errorPolicy: 'all',
notif
浏览 4提问于2021-12-17得票数 1
假设我有这样的例子：
import React, { useMemo, useCallback } from 'react'
const Hello = (props) => {
const { firstName, lastName } = props
const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName])
const sayHello = useCallback(() => {
console.log(`Hello, ${fu
浏览 3提问于2020-11-26得票数 2
回答已采纳
使用的原始代码-
import { Create } from '@material-ui/icons';
<DroppableFolder
count={draftsCount}
sidebarOpen={open}
folderId={FolderType.Drafts}
Icon={Create}
name="Drafts"
type="folder"
url={Communication.dr
浏览 4提问于2020-03-23得票数 0
回答已采纳
2回答
函数后数组为空
、、、
我是Cocoa Touch的新手，我有一个问题需要解决。如果有人能帮上忙，我将不胜感激。
我想创建一个tableDataList来显示在桌子上。AsyncViewController将调用TableHandler fillList方法初始化表数据。但是在fillList调用之后，tableDataList返回为空。
有人能给我解释一下这个问题吗？
在“AsyncViewController.m”中：
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (v
浏览 2提问于2010-08-10得票数 1
回答已采纳
在react类上，我会写这样的东西
class Myclass extends React.Component {
handleUpdate = info => {
//do the update
}
render() {
return (
<SomeMarkup>
<SomeComponent onUpdate={this.handleUpdate} />
</SomeMarkup>
)
}
}
如果使用函数，我只需编写以下内容
function MyFunction(
浏览 0提问于2019-02-28得票数 13
回答已采纳
9回答
我的react代码中有一个问题。
我使用Material-ui和redux-form。我有select input like，在更改这个select之后，我应该在中重置值。我使用react-form中的'change‘操作，并为文本字段设置值。但是标签仍然存在。我可以清除或重置中的值吗？
<Autocomplete
options={list}
getOptionLabel={option => option.name}
onInputChange={onChange}
onChange={onChangeAutoComplete}
浏览 1提问于2020-01-18得票数 34
3回答
我有一些很重的表格要处理。因此，我试图在任何能够找到性能的地方压缩性能。最近，我添加了“为什么-你-给我的评论，以获得更多的洞察力，可能会减缓我的网页。”例如，当我单击复选框组件时，我注意到了所有其他组件的重新呈现。理由总是一样的。WDYR说
重新呈现是因为道具更改:相同名称的不同函数{prev onChangeHandler:ƒ} "!==“{next onChangeHandler:ƒ}
我尽量尊重我所发现的最佳做法。组件传递的回调函数遵循以下模式
import React, { useState, useEffect } from 'react';
imp
浏览 1提问于2019-05-17得票数 5
回答已采纳
在控制器内部，我有以下代码，
export default Controller.extend({
session: service(),
cards: {},
init() {
this._super(...arguments);
const uid = this.get('session.data.authenticated.user.uid');
const databaseRef = firebase.database()
.ref(`cards/${uid}`);
const cards = this.
浏览 1提问于2017-04-23得票数 0
回答已采纳
1回答
我正在尝试使用react导航和react-native元素实现一个自定义导航抽屉。我还希望我的所有屏幕都有一个标题(它有一个汉堡，我可以用它来控制抽屉)。我面临的问题是，屏幕包括标题，而抽屉包括屏幕，但是标题需要抽屉来处理单击事件。那么如何将这个抽屉对象传递给我的汉堡包(在header组件中)？
文件UniversalHeader.js中的头文件如下
export default class UniversalHeader extends React.Component {
render() {
return (
<Header
l
浏览 4提问于2018-02-17得票数 0
1回答
我已经在角js中创建了一个组件，它显示了一些数据，但是当我的客户绑定发生变化时，我想在组件控制器中调用一些没有反映出来的服务，下面是下面的代码
在我的Test1.html中
<tab-customer title="Test Comp" customerCode="vm.customerCode" functioname="fnTest"></tab-customer>
vm.CustomerCode是在下拉的基础上发生变化的，所以它的变化
app.comp.TestComp已经被定义
angular
.
浏览 2提问于2017-06-06得票数 1
回答已采纳
我正在尝试在我的父组件(创建用户表单)和一个子组件(可重用的选择框)之间创建一个双向绑定。
父组件
<template>
<Selectbox :selectedOption="selectedRole" :options="roles" />
<span>SelectedRole: {{ selectedRole }}</span>
</template>
<script>
import Selectbox from '@/components/formE
浏览 0提问于2021-09-07得票数 1
回答已采纳
我有两个组件，比方说：
<filter-controls></filter-controls>
<data-list></data-list>
<data-list>有一个可以过滤的项目列表。假设它们是配料。
<filter-controls>有一个输入框。当有人在输入框中键入内容时，我希望数据列表自动过滤。
我不确定如何让数据列表响应筛选器控件中的更改。有人能给我指个方向吗？谢谢。
浏览 0提问于2018-06-29得票数 0
我可以使用强制为父组件重新加载，但是如何为子组件重新加载？
例如，以下反应类方法：
buttonClick = () => {
//This updates parent (this) component
this.forceUpdate();
//This causes runtime error ("..not a function in buttonClick...")
Rtable.forceUpdate();
}
render () {
<div>
<RTable />
</div>
浏览 2提问于2020-06-04得票数 7
回答已采纳
我正在尝试写一个表单，以便我可以编辑用户的详细信息，然后提交给后端 我希望表单在表单中显示用户的当前详细信息，这些可以留在原样或编辑，然后提交时，新的详细信息被传递到后端并保存在数据库中。 我已经写了后端代码springboot，这一切都很好地测试了邮递员。 到目前为止，我在react中有一个组件，它在遍历上一个api调用中返回的所有用户之后显示所有用户。 const UserListItem = (props) => {
//Chekcing I can access these values from props
console.log(props.user.id
浏览 16提问于2021-11-12得票数 0
将样式传递给Material UI Autocomplete内的inputProp={}将创建一个"useAutocomplete.js:919未捕获焦点:无法读取null的属性‘TypeError’“错误。示例代码如下：
renderInput={params => (
<div>
<TextField
multiline={false}
classes={{
root: classes.textField
浏览 0提问于2020-10-20得票数 1
我正在尝试使用React和Angular指令重用我的HTML导航栏，但我对如何使用它感到有点困惑
这是我的navigationbar.html：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li
浏览 7提问于2020-05-11得票数 0
我想知道哪个版本更有效率。因为在第二个版本中，我感觉就像在一次又一次地用相同的函数重新创建相同的组件。但是在第一个版本中，它只创建一次函数并将它们传递给每个组件。那么哪一个更有表现力，为什么呢？
父组件
export const Parent = () => {
const handleSomething() {
// calculating something
}
const handleSomething2() {
// calculating something
}
const handleSomething3() {
// calc
浏览 6提问于2022-04-26得票数 1
2回答
我想创建一个组件来处理具有相同属性/逻辑的多个HTML元素。 import React from 'react';
import styled from 'styled-components';
interface GridProps {
htmlElement: 'div' | 'main' | 'header',
}
const GridFactory = (props: GridProps) => {
switch (props.htmlElement) {
case 'h
浏览 28提问于2020-08-16得票数 3
回答已采纳
在我的React代码中，我有一个同时呈现Table组件和Filter组件的Employees页面。过滤器代码操作存储在Employees页面中的一些数据，然后通过useEffect更新过滤器的状态。有问题的数据作为属性传递给筛选器组件和表组件。但是，当此更改发生时，只有筛选器组件会重新呈现。下面的代码摘录。过滤函数示例：
function filterFunction() {
let spliceArray = [];
if ($('#firstNameFilter').val() !== '') {
for (l
浏览 1提问于2020-04-26得票数 0
我在我的反应申请中面临着这个问题。
TypeError:无法读取未定义(读取'requestContent')的属性
在我的应用程序中，我正在使用commercejs。代码指向isEmpty=!cart.line_items.length;.当选中它时，它会显示适当的值。此外，我注意到Api两次返回空数组，第三次返回填充数组。为什么会这样呢？有人来帮我解决这个问题吗？
Cart.jsx
import React from "react";
import { Container, Typography, Button, Grid } from "@mate
浏览 4提问于2021-09-23得票数 3
回答已采纳
我正在创建一个React应用程序，其中有一个名为FirebaseManager的类。登录Google后，我们从Firebase检索一个对象，其中包含我们需要的用户的所有信息。我希望将此信息存储在User类的一个对象中，以便在UI中本地提供它。为此，我在FirebaseManager中创建了一个属性currentUser，在其中我初始化了User的一个空对象，然后用updateUser方法更新它。下面是它们的代码：
// Current logged in user
currentUser = new User();
// Update user
updateUser(user,
浏览 0提问于2020-05-03得票数 0
3回答
使用React类，当构造函数中有state时，您可以将其直接继承到子组件，并使用回调从子组件继承到父组件。如何使用钩子将状态从父对象转移到子对象？useReducer或Redux是唯一的方法吗？
浏览 28提问于2020-05-18得票数 1
回答已采纳
2回答
我正在用redux编写我的第一个角2/4应用程序(我对这个模式还不熟悉)，我陷入了一个问题。我正在使用@ngrx/商店
有一个模型，叫做内容。我的商店(app.store.ts)是：
export interface AppStore {
contents: {id: number, Content};
contentContents: {id: number, Array};
}
“内容”有一个所有内容的列表(id 1，内容1；id 2，内容2)。'contentContents‘有一个内容列表及其子列表。内容可以有子内容。所以我想保留一个物体，比如：
{ 1: 2
浏览 6提问于2017-04-26得票数 0
如何将dataKey的值传递给另一个组件？我有一个带自定义点的折线图，这个点需要一个来自数据的值。如何将数据密钥的值传递给它？ const data = [
{ name: 'abc', value: '1' },
{ name: 'cde', value: '2',},
{ name: 'fgh', value: '3' }
...
];
<LineChart data={data} margin={{ right: 50, left: 50 }}>
浏览 64提问于2019-01-28得票数 0
下面的facelet代码正在成功执行，它在employeeId inputText组件失去焦点时呈现一条消息...
<h:inputText id="employeeId" value="#{questionAnswerAction.questionAnswerActionForm.employeeId}"
required="true" requiredMessage="#{app:requiredFieldMessage(bundle, 'label.peoplesoftId')}"
binding
浏览 0提问于2012-12-07得票数 0
回答已采纳
在我的标签屏幕代码中，我遇到了一种非常奇怪的行为。我试图将额外的道具传递到屏幕组件中，所以我决定创建一个箭头函数来返回Re欲组件(upcomingOrderView)。当我试图在Tab屏幕组件中调用这个函数时，它确实工作得很好，但是当this.state.bookingsBucket.upcoming更新时，屏幕没有重新呈现。下面是代码：
class A extends React.Component {
upcomingOrderView = (props) =>{
return (
<BookingsOrderView
浏览 1提问于2021-03-31得票数 1
回答已采纳
对于组件交互，我在angular6中有一些查询。对于组件交互，我们有@Input、@Output、viewChild和services等方法。但大多数情况下我们将使用服务。
在什么情况下，我们需要使用@Input、@Output和viewChild来传递应用程序中的值
@Input、@Output和viewChild方法有什么限制吗？
我们可以使用@Input，@Output方法传递大量数据或值数组吗？
我们可以在本地范围内使用“输入”和“输出”吗？请帮助我澄清我的疑虑
浏览 0提问于2019-07-19得票数 1
回答已采纳
据我所知，如果我将父组件状态向下传递给子组件，那么该子组件将获得父组件的活动状态。
因此，在父对象的状态中所做的更改也可以通过它所使用的道具立即在子对象中使用。
这是正确的吗？
浏览 2提问于2016-06-26得票数 34
如何在DDD中处理url段塞生成？
内部构造函数？但是实体依赖其他服务是不好的。
作为构造函数参数传递？我认为插件不应该出现在那里，因为它们不是业务需求。是吗？
或者只是有一个二传手？
浏览 5提问于2015-03-12得票数 5
您能在匿名函数中安全地利用useMemo吗？
import {useCallback, useMemo} from "react";
function Component(props) {
const [scollLeft, setScrollLeft] = useState(0); // dictates which elements are visible on screen
const onScroll = useCallback(({scrollLeft}) => {
setScrollLeft(scrollLeft);
}, [])
浏览 1提问于2021-05-18得票数 0
回答已采纳
例如，中的代码使用...props。有人能给我解释一下它是什么吗?它是如何使用的？我确信这与this.props有关，但我不能完全确定。谢谢!
浏览 0提问于2016-08-24得票数 1
我刚开始反冲，我正在使用所有的类组件。这是我的后坐力状态
export const tokenState = atom({
key: "tokenState",
default: "",
});
如何在类组件中使用后坐力并设置令牌？我在app中使用了RecoilRoot作为
<RecoilRoot>
<Header />
<Main />
</RecoilRoot>
在login.js中，我想在反冲中设置令牌，但是login.js是一个类组件。
const res = await APIS.logi
浏览 13提问于2020-07-12得票数 7
回答已采纳
如果我给一些部件，比如：
<MyComponent {...props} />
而不是
<MyComponent myProp={value} />
其中道具可能具有此组件不使用的一些属性。
组件如何知道哪些道具已经更改，以及它是否应该仅基于它所使用的道具重新呈现？它知道吗？
浏览 0提问于2019-05-25得票数 0
回答已采纳
1回答
似乎React组件总是在其父组件呈现时运行其render方法，即使子组件没有状态或道具更改，即使子组件没有状态或道具。
这是应该的吗？这里面有没有效率低下的地方？将子组件切换到PureComponent可以解决这个问题，并且子组件将不会reRender。我应该更喜欢PureComponents而不是常规组件吗？
浏览 11提问于2017-01-17得票数 3
1回答
我在使用角的团队工作，我以前用过Vue，到目前为止我已经学习了5天的角7，而我的团队仍然使用角4，我想知道如何在孩子中建立起对父母的道具？我通常在Vue中使用Prop在组件中，所以，我可以在其他组件上使用它并设置Prop的数据，但是在角度上，我不知道如何使用它(我认为到目前为止我已经学习了它，但仍然不确定如何以正确的方式绑定)，它可以吗？
我想在这个角度组件中创建一个加载程序组件，但是我想让它可以重用，以便在另一个组件上设置加载程序的宽度和高度，如何在角度上这样做呢?？
假设我想获取数据，然后在显示加载程序时等待它。
就像这样：
<div>
<app-loader *n
浏览 0提问于2019-05-17得票数 1
回答已采纳
当我的应用程序加载时，运行下面的查询，并在浏览器中显示来自数据库的结果。但是，我的应用程序也有一个提交按钮。在按下submit按钮的同时传递来自submit的时间戳输入时，如何运行整个组件？
handleSubmit(event) {
event.preventDefault();
console.log(this.state.inputValue)
this.state = {
inputValue: new Date(document.getElementById("time").value).valueOf()
};
console.log(t
浏览 2提问于2018-08-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
