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

时间:2017-07-19 08:20:20

标签: javascript reactjs react-native

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

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

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

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

为了澄清,我不是在谈论改变propsstate。我想更改父级中的类属性。

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

提前致谢。

1 个答案:

答案 0 :(得分:4)

选项是使用回调。 在这里,您公开了一个父级回调,它改变了父数据(状态),子组件使用一个从父级状态获取数据的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