React本机组件未从另一个组件调用
是指在React开发中，一个组件试图直接调用另一个组件的本地方法或访问其本地状态，而不是通过props进行传递。这种做法是不推荐的，因为它违反了React组件之间的数据流动原则。
React鼓励使用props来传递数据和方法，以实现组件之间的通信。通过props，父组件可以将数据和方法传递给子组件，子组件可以通过调用这些方法或访问这些数据来实现与父组件的交互。这种单向数据流的设计使得组件的状态管理更加可控和可预测。
如果一个组件需要调用另一个组件的方法或访问其状态，应该通过props将这些方法或状态传递给子组件。父组件可以将自己的方法作为props传递给子组件，子组件可以在需要的时候调用这些方法。同样，父组件也可以将自己的状态作为props传递给子组件，子组件可以通过props来获取和使用这些状态。
这种通过props传递数据和方法的方式有以下优势：
- 组件之间的数据流动清晰可见，易于理解和维护。
- 父组件可以控制和管理子组件的状态和行为。
- 组件之间的解耦程度高，可以更方便地进行组件的复用和组合。
对于React本机组件未从另一个组件调用的问题，可以通过以下步骤来解决：
- 确保需要调用的方法或访问的状态属于父组件的范畴，而不是子组件的本地方法或状态。
- 在父组件中定义这些方法或状态，并将它们通过props传递给子组件。
- 在子组件中通过props来调用这些方法或访问这些状态。
举例来说，如果有一个父组件Parent和一个子组件Child，需要在Child组件中调用Parent组件的方法，可以按照以下步骤进行：
- 在Parent组件中定义需要调用的方法，例如handleClick。
- 在Parent组件的render方法中将这个方法通过props传递给Child组件，例如<Child onClick={this.handleClick} />。
- 在Child组件中通过props来获取这个方法，并在需要的时候调用它，例如<button onClick={this.props.onClick}>点击</button>。
这样，就实现了在React中通过props来调用父组件的方法，而不是直接调用子组件的本地方法。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse
相关·内容
2回答
React JS -这个程序是如何工作的？
javascript、reactjs、react-native、architectural-patterns
我在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
3回答
如何在ReactJS中将更改的状态从子组件传递到其父组件
reactjs、redux、components、state
我正在尝试理解如何在ReactJS中将更改的状态从子组件传递到其父组件？到目前为止，下面的代码改变了孩子的状态，但没有改变父母的状态，你知道我做错了什么吗？
我正在使用redux从mongodb获取产品阵列。
产品数组示例：
[
{
“_id”: “2331”,
“department”: “Shoes”,
“category”: “Shoes/Women/Pumps”,
“name”: “Calvin Klein”,
“title”: “Evening Platform Pumps”,
浏览 5提问于2018-09-06得票数 0
1回答
为什么数据不从父级传递到它的child2组件？
reactjs、react-hooks
问题是：-React=>there是一个父组件，它有两个子组件，数据在child1中可用，我从子1获取数据，通过子方法将它传递给父组件，并且数据正在控制台面板中的父组件中获取，现在我将它作为支持从父组件发送到它的child2组件，但是数据不被获取。它将以空数组的形式出现。请帮帮我。注意:数据是数组格式的。
const parent=()=>{
const [item,setitem]=useState([])
const getData=(value)=>{
setitem(value)
}
<child1 getData={getData} item={item}
浏览 4提问于2022-11-19得票数 -1
2回答
如何在React中从子组件中获取值？
javascript、reactjs
您能告诉我，如何将state值从子组件child复制到Parent parent吗？子组件实现按钮上状态的递增和递减。该值也应显示在Parent中。谢谢! import React, {useState} from 'react';
import Child from "./Child";
const Parent = () => {
const [value, setValue] = useState(0);
return (
<>
<span>{value}</s
浏览 29提问于2021-08-21得票数 0
2回答
ReactJS -从子组件调用父方法并等待父组件的响应
reactjs
我刚开始使用ReactJS，所以我还在掌握它的窍门。我需要一些帮助，在一个方面，我没有找到答案。我试图从子组件调用父组件中的函数，但我也希望从父组件获得包含一些数据的答案。我怎样才能做到这一点？目前我所做的是：
import Parent from './parent.js';
class Child extends React.Component {
constructor(props) {
super(props);
};
click = () => {
this.props.parentMethod(
浏览 0提问于2018-08-13得票数 0
回答已采纳
1回答
如何在第一次呈现时将父值传递给子元素，并从子元素中更改父组件值？
javascript、reactjs、components、undefined、react-props
因此，我要做的是将一个数字传递给子组件，它将只在第一个呈现时传递。之后，我将尝试更改当前值，并将该值从子组件传回父组件。但是，我无法将价格传递给孩子，因为我正在接受未定义的。
不知道如何在这个上下文中传递数据，有什么想法吗？
function Parent(props, {price}) {
const [amount, setAmount] = React.useState("200");
function handleChange (newValue) {
setValue(newValue);
浏览 5提问于2022-05-21得票数 0
回答已采纳
2回答
Vue/React:调用函数以传递数据的适当方式？
reactjs、vue.js
所以，在构建React或Vue应用程序时，我对传递数据的最佳方法感到困惑。
方法1)让我的子组件调用函数，这些函数调用API来获取/刷新组件上的数据。
方法2)最近，我在这些子组件中尽可能地进行了切换，将这些API调用放在父组件中，子组件调用父组件中调用该函数的函数，并将新数据作为支持传递。
这些都是处理数据的首选方法吗？方法2对我来说有点干净，并不是所有的地方都有可能，但是如果可能的话，父母应该负责刷新数据，但这也使得孩子依赖于父母，所以我不确定了。
方法1
<template>
<div>
<div v-for="(p
浏览 0提问于2019-03-21得票数 1
1回答
将数据从子女传递给祖父母
reactjs
我还没反应，还在学习。我想把数据从孩子传给祖父母。到目前为止，我联系到了父母，我被困住了。
儿童部分：
export class Child extends React.Component{
constructor(props) {
super(props);
this.state= {
counterChild: 5
}
}
render() {
return(
<div>
<span>Child: {this.state.counterChild}</span><
浏览 1提问于2018-04-28得票数 7
2回答
有条件地创建react组件时抛出错误
javascript、reactjs
我有一个名为ListChats的react组件和另一个名为Chat的组件。
ListChats调用聊天的呈现
我需要的是，如果在呈现聊天时出现错误，ListChats会知道并返回可用聊天列表。
一个可能的错误，它的捕获尚未实现，将是如果用户没有名称，聊天捕获此错误并返回到ListChat。
ListChats组件：
import React, { Component } from "react";
import Chat from "../Chat";
import { Button } from 'react-bootstrap';
exp
浏览 3提问于2021-02-16得票数 1
1回答
不从另一个组件调用函数的反应？
javascript、reactjs、components
我相信我正在尝试完成一件简单的事情，但是失败了。 React并没有像我希望的那样从另一个组件的ChildComponent中调用'alertFunc()‘。 下面是ChildComp： class ChildComp extends React.Component {
constructor(props) {
super(props);
this.state = { };
this.input = React.createRef();
}
alertFunc = () => {
alert
浏览 15提问于2020-07-13得票数 0
回答已采纳
3回答
反应:将子状态传递给父状态
reactjs、state
我在React工作了一年多了，我读过、和。
我了解到React与数据流的概念是单向数据流。
来自这些页面的柠檬酸：
React的单向数据流(也称为单向绑定)保持了所有的模块化和快速性。
记住: React是关于在组件层次结构下的单向数据流。可能不清楚哪个组件应该拥有什么状态。对于新来者来说，这往往是最具挑战性的部分，所以请按照以下步骤找出答案：
如果你把一个组件树想象成一个支撑点的瀑布，那么每个组件的状态就像一个附加的水源，它在任意点连接它，但也会向下流动。
正如我所理解的，下面的示例是不允许的，因为我将子状态数据传递给父节点。但我看到一些开发人员这样工作：
class Parent
浏览 2提问于2018-10-03得票数 9
1回答
React子组件没有更新父级状态，因此第二个子级不会注意到更改
javascript、reactjs
目前我有这样的结构。
Child1 <---- Parent ----> Child2
父组件具有此状态
this.state = {
authenticationChecked: true,
isAuthenticated: true,
sideBarRetracted: false
}
this.retract = this.retract.bind(this);
this.unretract = this.unretract.bind(this);
和以下函数
r
浏览 14提问于2020-02-04得票数 0
回答已采纳
1回答
从child1组件访问child2组件的方法
reactjs、react-native、react-redux、components
目前我有三个组件：Child1、Child2和Parent。当按下Child2中的一个按钮时，我想在Child1组件中调用一个函数。
到目前为止，我一直在尝试这样做，但我总是说错话。
this.refs.child.child2Function is not a function
处理这种情况的正确方法是什么(从另一个子组件调用一个子组件中的函数)？
我还在我的项目中使用redux。但是我的Child2组件是在多个选项卡中呈现的。因此，我不能使用redux更新该值，因为该值将在整个Child2组件中更新。
Parent.js
class Parent extends Component{
p
浏览 1提问于2018-08-15得票数 1
2回答
React -调用子组件中的父方法
javascript、reactjs
我有一个父组件和子组件，我想在子组件中调用一个父方法，如下所示：
import Parent from './parent.js';
class Child extends React.Component {
constructor(props) {
super(props);
};
click() {
Parent.someMethod();
}
render() {
<div>Hello Child onClick={this.click}</>
浏览 2提问于2016-10-18得票数 33
回答已采纳
2回答
从React中的子组件中更新道具
reactjs
我对Js的反应是刚刚开始的，我对下面的场景非常困惑。在我的父组件中有一个名为availableShops的数组，我只是使用setState在子组件中更新它。我也希望在我的子组件中保留setState方法。
父级：
import React, { Component } from 'react';
import Child from './shop-with-price';
export default class Parent extends Component {
constructor(props) {
super(props);
浏览 2提问于2019-09-14得票数 0
2回答
如何为“只隐藏”组件保留状态
reactjs、flux
通过，我了解了React自动维护子组件的状态，这就是为什么
不应该在州里去什么？
React ：基于底层支持和状态在render()中构建它们。
现在，我的问题是如何对我们正在隐藏的组件做同样的操作？
考虑一个子组件，它在迭代中不会被显示，同时我们希望保留它的状态，以便将来它将被带回！
为了说明我的确切意思，我设计了一个案例场景来向您展示。在下面的代码中，您可以添加有状态子组件。为每个组件提供了一个复选框，这样您就可以标记它们。最后，第三个按钮将隐藏未被标记的子组件。我正在寻找一种方法来恢复未标记的组件的状态，一旦它们被带回来。
class BlackBox extends Reac
浏览 6提问于2016-05-24得票数 3
回答已采纳
1回答
使用redux从子组件更新根组件的属性
reactjs、redux、react-redux、react-redux-firebase
我有两个组件:包含数据列表的Root组件。从firebase中显示数据。第二个组件是一个DateRangepicker，它帮助选择日期，这样我们就可以筛选根的组件数据。 class Child extends React.Component {
pickDateRange = (e: React.FormEvent<HTMLFormElement>) => {
// getting data successufly from firebase
// this is where I get the error trying to set the
浏览 22提问于2019-03-24得票数 0
6回答
通过回调函数将数据从子组件传递到父组件- function
javascript、reactjs
通过回调函数将数据从子组件传递到父组件，但不知何故它不起作用。我在这里做错什么了？通过回调函数将数据从子组件传递到父组件- function
这是密码
class App extends React.Component{
constructor(props){
super(props);
this.state={
input:'this is the input for now'
}
//this.handleInput=this.handleInput.bind(this);
}
ha
浏览 7提问于2017-06-26得票数 8
回答已采纳
4回答
如何从具有多个子级的父级访问特定的子级状态？
javascript、reactjs
假设我在React中有一个父组件，其中包含同一个组件类的3个单独的子组件(也就是说，在parent类中我有3个子组件)。如何在父组件中访问每个子组件的状态？ 我最初的想法是为我想要访问的每个孩子的状态都有一个单独的变量(我只想为每个孩子访问已填充的变量)。但我觉得这肯定是对React已经存在的东西的草率解决方案，所以如果有任何建议，我将不胜感激。 下面的示例代码用于说明目的。 const Parent = (props) => {
return (
<div>
<Child/>
<Child/>
<Child/>
浏览 35提问于2021-08-22得票数 0
1回答
React.js中父组件和子组件之间的通信
javascript、reactjs
只是遇到了一个问题，在父和子组件之间的沟通在反应。
儿童
var Child = React.createClass({
getInitialState() {
return {
childState: this.props.state,
};
},
changeState(e) {
this.setState({e.target.id});
},
render: function () {
return (
<button id=
浏览 3提问于2016-03-31得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
