javascript - 组件按钮设置主类的状态 react native

Question

我的 react native 组件(Grid)中有一个 TouchableOpacity 按钮，我需要更改调用该组件(App.js)的类的状态。这可能吗？

App.js

import Grid from '../components/Grid'

export default class App extends React.Component {
  state = {
      opt: '1'
  }

  render(){
    return(
      <View style={styles.container}>
        <Grid/>
      </View>
    );
  };
}

网格.js

export default class Grid extends React.Component {
  _setMainState = () => {
    this.setState({
      opt:'2'
    });
  }

  render(){
    return(
      <View style={styles.container}>
         <TouchableOpacity onPress={this._displayList}>
            <Text>Set App.js State</Text>
         </TouchableOpacity>
      </View>
    );
  };
}

Answer 1

您可以将状态 setter 传递给您的子组件，尽管这不被认为是最佳实践，因为它可能会导致无限的重新渲染循环。
尝试使用上下文，或将您的元素包装在存储此值的另一个元素中。

import Grid from '../components/Grid'

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      opt: '1'
    };
  }
  
  changeOpt(newOpt) {
    this.setState({
      opt: newOpt,
    });
  }

  render() {
    return(
      <View style={styles.container} changeOpt={this.changeOpt.bind(this)}>
        <Grid/>
      </View>
    );
  };
}