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

Question

React 文档建议按照以下方式在组件中存储数据:

• props 用于传递和存储不可变数据
• state 用于存储渲染的动态数据
• 未渲染的动态数据可以存储在任何方法中定义为 this.attribute 的实例属性中

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

文档建议这样做，用于更改祖先组件中的状态。 但是，我正在使用的数据不会呈现，因此会保存为属性。是否建议我使用回调函数从子组件修改它？

为了澄清起见，我并不是在谈论更改 props 或 state。我想更改父级中的类属性。

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

提前致谢。

Answer 1

一个选项是使用回调。 在这里，您公开来自父组件的回调，该回调会更改父组件的数据(状态)，子组件使用一个 prop 从父组件的状态获取数据。就是这样!

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);

更新:

Facebook has a nice tutorial on similar issue, and Facebook names this as "Lifting State Up"