Javascript React子组件可以更改其父组件中存储的数据吗？

React文档建议在组件中存储以下数据：

• 道具

  用于传递和存储不可变的数据

• 状态

  用于存储呈现的动态数据
• 未呈现且动态的数据可以存储在实例的属性中，该属性在任何方法中定义为

  this.attribute

所以我的问题是，让子组件更改其父组件的数据可以吗

这是文档建议的，用于更改存在于祖先组件中的状态但是，我正在处理的数据没有呈现，因此保存为属性。建议我使用回调函数从子组件修改它吗

我只是想澄清一下，我不是说要改变

道具

或

状态

。我想更改父对象中的类属性。

React文档建议将未呈现的可变数据存储在简单属性中

---

提前感谢。

一个选项是使用回调。 在这里，您公开了一个来自父级的回调，它更改父级数据（状态），子组件使用一个从父级状态获取其数据的道具。就是这样

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View, TouchableOpacity} from 'react-native';


class Child extends Component {
  render() {
    const { data } = this.props;
    console.log(`Child Component Data is ${data}`);
    return (
      <TouchableOpacity onPress={() => {this.props.onChange('Success!')} }>
        <Text style={{fontSize: 30}}>{data}</Text>
      </TouchableOpacity>
    );
  }
}

class Parent extends Component {

  constructor() {
    super();
    this.state = {
      data: 'default data in parent'
    }
  }

  onChange = (data) => {
    console.log(`Data changes to ${data} !`);
    this.setState({ data });
  }

  render() {
    const { data } = this.state;
    return <Child data={data} onChange={this.onChange}></Child>;
  }
}


AppRegistry.registerComponent('ChildEditParentData', () => Parent);

import React，{Component}来自'React'；
从“react native”导入{AppRegistry，StyleSheet，Text，View，TouchableOpacity}；
类子扩展组件{
render（）{
const{data}=this.props；
log（`Child Component Data是${Data}`）；
返回(
{this.props.onChange（'Success！'）}>
{data}
);
}
}
类父级扩展组件{
构造函数（）{
超级（）；
此.state={
数据：“父级中的默认数据”
}
}
onChange=（数据）=>{
log（`Data changes to${Data}！`）；
this.setState（{data}）；
}
render（）{
const{data}=this.state；
返回；
}
}
AppRegistry.registerComponent（'ChildEditParentData'，（）=>Parent）；

更新：

Facebook在类似问题上有一个很好的教程，Facebook将其命名为“”

---

一个选项是使用回调。 在这里，您公开了一个来自父级的回调，它更改父级数据（状态），子组件使用一个从父级状态获取其数据的道具。就是这样

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View, TouchableOpacity} from 'react-native';


class Child extends Component {
  render() {
    const { data } = this.props;
    console.log(`Child Component Data is ${data}`);
    return (
      <TouchableOpacity onPress={() => {this.props.onChange('Success!')} }>
        <Text style={{fontSize: 30}}>{data}</Text>
      </TouchableOpacity>
    );
  }
}

class Parent extends Component {

  constructor() {
    super();
    this.state = {
      data: 'default data in parent'
    }
  }

  onChange = (data) => {
    console.log(`Data changes to ${data} !`);
    this.setState({ data });
  }

  render() {
    const { data } = this.state;
    return <Child data={data} onChange={this.onChange}></Child>;
  }
}


AppRegistry.registerComponent('ChildEditParentData', () => Parent);

import React，{Component}来自'React'；
从“react native”导入{AppRegistry，StyleSheet，Text，View，TouchableOpacity}；
类子扩展组件{
render（）{
const{data}=this.props；
log（`Child Component Data是${Data}`）；
返回(
{this.props.onChange（'Success！'）}>
{data}
);
}
}
类父级扩展组件{
构造函数（）{
超级（）；
此.state={
数据：“父级中的默认数据”
}
}
onChange=（数据）=>{
log（`Data changes to${Data}！`）；
this.setState（{data}）；
}
render（）{
const{data}=this.state；
返回；
}
}
AppRegistry.registerComponent（'ChildEditParentData'，（）=>Parent）；

更新：

Facebook在类似问题上有一个很好的教程，Facebook将其命名为“”

---

道具是不能改变的，它们甚至不应该改变。从父对象到子对象的回调方法改变了父对象的状态，这正是正确的做法。将props函数传递给您的子对象。调用此函数时更改父级中的状态。你应该（也不能）永远不要改变道具的价值。道具是不能改变的，它们甚至不应该改变。从父对象到子对象的回调方法改变了父对象的状态，这正是正确的做法。将props函数传递给您的子对象。调用此函数时更改父级中的状态。您应该（也不能）永远不要更改道具值。这也是React文档建议您执行操作的方式-请参阅和。React中建议的流保持不变，无论您是更改父属性还是类属性中的状态。@David感谢您的回答。正如我的问题所表明的，我知道这是更改子组件中父组件状态的推荐方法。但是，我所说的是一个位于父对象中的数据属性。与国家或道具无关（如上面的一些评论所示）。因此，您是否建议使用上述回调方法更改父级的普通旧类属性？谢谢你的帮助！这也是React文档建议您执行操作的方式—请参阅和。React中建议的流程保持不变，无论您是在更改父属性还是类属性中的状态。@David感谢您的回答。正如我的问题所表明的，我知道这是更改子组件中父组件状态的推荐方法。但是，我所说的是一个位于父对象中的数据属性。与国家或道具无关（如上面的一些评论所示）。因此，您是否建议使用上述回调方法更改父级的普通旧类属性？谢谢你的帮助！