您可以将回调方法传递给子反应组件。

Question

我想更改client = {state:0} 您可以使用this.client.state

进行访问

我还有一个孩子，其中包含一个按钮。当您按下按钮时，我正在尝试更改此“状态”变量。

由于某种原因，我在互联网上发现的所有内容都不适合我。我已经坚持了5个小时，我想是时候该问问自己了

import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import Home from './Components/Home';
import Activity from './Components/Activity';

export default class App extends React.Component {
client = {state:0}

  render() {
    if(this.client.state == 0){
        return(
            <View style={{flex: 1}}>
                <Home />
                <Child />
            </View>
        );
    } else {
        return(
            <View style={{flex: 1}}>
                <Activity />
                <Child />
            </View>
        );
    }

Answer 1

有不同的方法可以做到这一点。例如，可以使用Redux来完成，但是让我们采用一种更简单的方法。

还请注意，道具无法完成此操作，因为子组件无法更新其父母的道具。

还要注意，您使用状态的方式似乎很奇怪。应该在类级别（或组件级别）上设置。

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {myProperty: 0};
    }
}

您可以将回调方法传递给子反应组件。

<Child callback={this.onButtonClick} />

在Client组件上，创建该回调方法：

onButtonClick() {
    this.setState({buttonClicked: true});
}

要保持整洁，请在构造函数中定义初始值。您还必须绑定函数以具有正确的此参数，否则this变量将来自事件而不是您期望的类。

constructor(props) {
    super(props);
    this.state = {buttonClicked: false};
    this.onButtonClick = this.onButtonClick.bind(this);
}

就是Client组件了。

现在，在Child组件上，您需要在可能的情况下触发此回调方法。

想象一下子级具有以下按钮，并在子级组件onChildButtonClick上添加事件处理程序。您还必须绑定构造函数。

constructor(props) {
    super(props);
    // bind this for access to this class' data
    this.onChildButtonClick = this.onChildButtonClick.bind(this);
}

onChildButtonClick() {
    // Might want to do a typeof is function check here too
    if (this.props.callback) {
        // Trigger the callback on the parent component, letting it know the button was triggered
        this.props.callback();
    }
}

render() {
    return <button onClick={this.onChildButtonClick}>Click me</button>;
}

在初始化期间，父组件将回调方法发送到子组件。每当在子组件上单击按钮时，子组件都会触发父组件提供的功能（回调），实际上是在父组件上运行一段代码，然后用请求的值（可以是字符串，或其他任何东西。）

Redux

Redux是另一种实现方式，它基本上保留了一种可跟踪的database，可以通过页面加载在任何组件中使用它-但是，这需要整个教程。

如何在react-native中更改父项的变量

1 个答案:

您可以将回调方法传递给子反应组件。

Redux