React -子组件没有在父组件上设置状态？
React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，将用户界面拆分为独立的可复用组件，通过组件的组合和嵌套来构建复杂的界面。
在React中，组件之间通过props（属性）进行数据传递。父组件可以通过props将状态传递给子组件，子组件可以通过props接收并使用这些状态。然而，子组件不能直接修改父组件的状态，因为React采用了单向数据流的原则，只能通过父组件传递新的props来更新子组件的状态。
如果子组件需要修改父组件的状态，可以通过在父组件中定义回调函数，并将该函数作为props传递给子组件。子组件可以在需要的时候调用该回调函数，将需要更新的数据传递给父组件，从而实现状态的更新。
React的优势在于其高效的虚拟DOM（Virtual DOM）机制，通过比较虚拟DOM树的差异，只更新需要更新的部分，从而提高了性能。此外，React还具有良好的生态系统和丰富的社区支持，有大量的第三方库和组件可供使用。
对于React开发，腾讯云提供了一系列的产品和服务，包括云服务器、云数据库、云存储等，可以满足不同规模和需求的应用场景。具体推荐的产品和产品介绍链接地址可以参考腾讯云官方网站的相关文档和页面。
总结：React是一个用于构建用户界面的JavaScript库，采用组件化的开发模式。子组件不能直接在父组件上设置状态，而是通过props进行数据传递。腾讯云提供了一系列的产品和服务，可以满足React开发的需求。
相关·内容
我正在尝试理解如何在ReactJS中将更改的状态从子组件传递到其父组件？到目前为止，下面的代码改变了孩子的状态，但没有改变父母的状态，你知道我做错了什么吗？
我正在使用redux从mongodb获取产品阵列。
产品数组示例：
[
{
“_id”: “2331”,
“department”: “Shoes”,
“category”: “Shoes/Women/Pumps”,
“name”: “Calvin Klein”,
“title”: “Evening Platform Pumps”,
浏览 5提问于2018-09-06得票数 0
我有一个父组件和子组件，在我的示例中，当单击“增加”按钮时，子组件将被重新命名。
import React, {useEffect,useState} from 'react';
export const App = (props) => {
const [count, setCount] = useState(0);
const handleCount = ()=>{
setCount(count+1);
}
useEffect(()=>{console.log("Parent was rerendered")})
浏览 3提问于2022-08-01得票数 1
我正在建立一个基本的购物篮的反应，我有点卡住了。
因此，App保存了整个JSON数据(刚刚从本地文件中提取)，我设想Cart将维护购物车的状态--也许是一系列产品ID。它还将用于使用路由/cart显示购物车的内容。
好的，所以问题的关键是我有ClothingList组件，它通过将'ClothingItem‘组件推到数组中来构建条目。在此组件(ClothingItem)中，有无处不在的产品显示和“添加到购物车”按钮：
<div className="items__item">
<h3>{props.item.name} - {props.item
浏览 0提问于2019-04-16得票数 0
回答已采纳
如何在加载react应用程序时将属性值从子组件发送到父组件？我有一个名为app.js的父组件，它呈现一个包含JSON组件的主组件。加载react应用程序时，我的属性JSONValue (在app.js中定义)保存一个空字符串。当加载react应用程序时，父组件中的JSONValue应该包含已经在子JSON组件中定义的值。如何在初始呈现时将这些值从JSON组件发送到应用程序组件？
我现在唯一能做到这一点的方法就是更改react app --> json组件中的值。然后，它将值从子级发送到父级。
因此: JSONValue的值是在JSON组件中定义的，只有当JSON组件发生变化时，才会应用于
浏览 14提问于2019-07-12得票数 1
3回答
我在React工作了一年多了，我读过、和。
我了解到React与数据流的概念是单向数据流。
来自这些页面的柠檬酸：
React的单向数据流(也称为单向绑定)保持了所有的模块化和快速性。
记住: React是关于在组件层次结构下的单向数据流。可能不清楚哪个组件应该拥有什么状态。对于新来者来说，这往往是最具挑战性的部分，所以请按照以下步骤找出答案：
如果你把一个组件树想象成一个支撑点的瀑布，那么每个组件的状态就像一个附加的水源，它在任意点连接它，但也会向下流动。
正如我所理解的，下面的示例是不允许的，因为我将子状态数据传递给父节点。但我看到一些开发人员这样工作：
class Parent
浏览 2提问于2018-10-03得票数 9
4回答
首先，我要指出，我不需要得到现成的解决办法。我只是需要一些指导如何正确地做这件事。
我有这样的父组件
import React from "react";
import Navbar from "./components/Navigation.js";
import Start from "./components/Start.js";
import Generator from "./components/Generator.js";
import Footer from "./components/Footer.js&
浏览 4提问于2020-12-28得票数 0
回答已采纳
下面是一个简单的例子：
const { Component } = React
const { render } = ReactDOM
const Label = ({ text }) => (
<p>{text}</p>
)
const Clock = ({ date }) => (
<div>{date.toLocaleTimeString()}</div>
)
class App extends Component {
constructor(props) {
super(props)
th
浏览 0提问于2018-08-25得票数 15
回答已采纳
我的问题是代码运行正常
我希望能够通过来自另一个页面的组件或通过我的数据库直接更改val: 'yolo'值
你有什么想法，怎么解决这个问题吗？效果
import React from 'react'
import axios from 'axios'
const entrypoint = process.env.REACT_APP_API_ENTRYPOINT + '/api';
class App extends React.Component {
constructor(props) {
super(props);
浏览 0提问于2020-02-10得票数 0
我正在尝试使用我的应用程序中的react-select "Select“组件作为一种便捷的方式来生成一系列下拉列表作为我的UI的一部分。 从react-select文档中，我已经能够让这些组件呈现所需的选项；但是，从选择组件存储的值是通过useState钩子存储为状态变量的。 我需要将这些菜单的值(状态)传递给父组件。我不知道如何获得在这些函数中生成的状态值，以便能够在更高的父组件中读取。下面是我目前所拥有的一些代码片段。 注意:填充这些子函数的选项属性的数组是在更高的父组件中生成的，并作为属性传递。代码的一部分似乎没有问题 function ButtonA(props){
co
浏览 20提问于2021-07-20得票数 0
目标:通过从父级的非状态变量发送道具来重新呈现独生子组件.
我想要重新呈现没有父组件的唯一子组件。下面是我编写的示例代码。cRoot是传递道具的父函数，CButton子组件需要在可见性变量更改时呈现。
在子组件中，我没有使用state，因为它曾经使用过，而且我不想将该值保持在状态中。另外，我不想创建作为纯组件的子组件。
在父类中，我希望使用变量(SubmitBtnVisibility)作为支持发送。
请解释为什么子组件没有更新，因为子组件的观点是道具正在更新？或者指向我哪里出错了？
提前谢谢你的帮助。
// Parent Component
class Root exten
浏览 1提问于2018-08-21得票数 3
回答已采纳
假设我有一个位于场景内部的comp (react-native-router-flux)。它让人们选择他们最喜欢的水果。
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {MKCheckbox} from 'react-native-material-kit';
var styles = StyleSheet.create({});
export default class PickAFrui
浏览 0提问于2016-11-14得票数 0
我有一个带有FlatList的模态组件(FlatList)，每个列表项都有两个带有'asc‘和'desc’值的单选按钮。当用户选择单选按钮时，使用列表的索引和按下按钮的值更新模态组件中的状态。用户只能选择一个按钮。
当用户按下模态上的"OK“时，我需要以某种方式获取发送给父组件的单选按钮('asc‘或'desc')的列表和值的索引。我该怎么做？被困在这上面已经很久了。下面是代码，链接到Snack：
Sortby.js
import {View, Text, Modal, StyleSheet, Button, FlatList,} from &#
浏览 12提问于2022-06-24得票数 1
回答已采纳
React中的父组件将道具传递给它的AnchorPopover子组件，如下所示：
<AnchorPopover
bannerHyperlinks={this.state.bannerHyperlinks}
hyperlinkTitle ={this.props.hyperLink1Text}
hyperlinkHref ={this.props.hyperlink1}
hyperlinkStyle ={hyperlink1Style}
onDetailsChange ={this.props.onHyperLink1DetailsChang
浏览 1提问于2015-03-10得票数 1
3回答
我正在构建一个React应用程序，我需要为我从应用程序打开的所有窗口存储处理程序(是的，这有点奇怪，但这是我必须要做的)。在使用React之前，我将窗口存储在一个指向父窗口的全局数组上(我知道JS全局变量是一种非常糟糕的做法，但它是在项目中指定的)。
我不想使用Redux，只想用React.来解决这个问题。
在新的React应用程序中，我在app组件的状态上声明了这个数组，并使用了一种方法来操作stae，作为子组件的支柱：
class App extends Component {
constructor(props) {
super(props);
this.state
浏览 1提问于2018-06-06得票数 1
2回答
我有一个select下拉组件作为子组件，其中选项(类别列表)是由父组件中的componentDidMount上的API生成的。当用户选择选项(类别)时，必须将选定的值传递回父component.The父组件，根据所选值执行get请求，并将结果作为选项(产品列表)传递给另一个具有select下拉列表的子组件。
我希望将这些子组件保持为无状态函数，因为它可以在多个组件中使用。
因此，类别列表在select下拉列表中作为道具传递-开发人员工具：
但不在网页上。
父容器
categories() {
return this.props.category && thi
浏览 0提问于2018-02-02得票数 0
回答已采纳
1回答
我很难更新我的状态和组件。在按下一个按钮后，我将更改弹出组件的一个支持的值。不更新道具的值。我相信这是使用setstate的副作用之一。我做了一些研究，发现使用useeffect钩子解决这个问题是有办法的，但我无法得到结果。下面是我的代码：
我的目标是从拥有Data0支持的表单获得一个Data1的道具，但是这个道具似乎根本没有更新。我模拟单击多个对象，结果是更新了fromData的值。因此，app.js是我的父组件。子组件是弹出窗口，其值应该更改为Bob和实际日期，而不仅仅是原始名称和原始日期的字符串值。
import React, { useState, useEffect } from &
浏览 4提问于2021-06-08得票数 0
回答已采纳
3回答
我有两个组件
读模式和分页
读取模式组件
state = {
currentPdf:[],
currentPage: null,
totalPages: null,
intialState:1,
};
constructor(props) {
super(props);
this.onChangePage = this.onChangePage.bind(this);
this.onCu
浏览 2提问于2020-04-10得票数 0
回答已采纳
1回答
DragAndResizeBox.js
我在ResizableAndMovable中使用ResizableAndMovable，就像react-rnd文档所说的
我发现我可以让this.resizableandmovable.state.x，this.resizableandmovable.state.y
class DragAndResizeBox extends Component {
constructor(props) {
super(props);
}
onDragStop = (event, ui) => {
console.log("
浏览 1提问于2016-09-23得票数 0
在这个例子中，我有一个父类组件: Dibf。我有一个子类组件: Header。
我可以设法把道具从父母传给孩子。但我试图通过这样做来向下传递状态(以下代码块的底线)：
export interface IDibfState {
CurrentUserTitle: string;
CurrentUser: string[];
CurrentUserGroups: string;
CurrentUserID: string[];
CurrentUserEmail: string;
FullName: string;
UniId: strin
浏览 5提问于2019-11-21得票数 0
回答已采纳
2回答
我很难弄清楚反应更新DOM的确切时刻。
注意：，我在下面的示例中使用styled-components。
参见此示例：
CodeSandbox：
它显示了容器的max-height属性的转换。
它按预期工作。我只是不知道为什么会起作用。
代码：
两份清单：
shortList需要高度的70px
longList需要高度的124px
const shortList = ["Item 1", "Item 2", "Item 3"];
const longList = ["Item 1", "Item
浏览 0提问于2019-07-18得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
