Question

React文档建议使用以下方法将数据存储在组件中：

props旨在传递并存储不可变数据
state用于存储动态数据，呈现
未呈现且是动态的数据可以存储在任何方法中定义为this.attribute

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

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

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

React docs建议将未呈现的可变数据存储在一个简单的属性中。

提前致谢。

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有类似问题的精彩教程，Facebook将其命名为“Lifting State Up”

React子组件改变存储在其父组件中的数据是否正常？

1 个答案: