Javascript 如何在React Native中将函数和数据从组件类传递到无状态类？

我正在使用react native，我想将函数和一些数据从组件类传递到另一个无状态类，但我无法传递函数和数据部分

在这里您可以看到我的组件类：

class Classroom extends Component {

    constructor(props, context) {
        super(props, context);



    };

    state = {
        isLightOn: false,
        title : "Turn light on "
    }

   onPress() {
       this.setState({isLightOn: !this.state.isLightOn})
       console.log(this.state.isLightOn)
       this.setState({title:this.state.isLightOn===false ?"Turn light off":"Turn light on"})

   }

    render() {
        return (
            <View style={styles.blue}>

                <LightBulb  isLightOn={this.state.isLightOn}> </LightBulb>
                <LightButton onPress={this.onPress} isLightOn={this.state.isLightOn} title={this.state.title} > </LightButton>


            </View>
        );
    }


}

类教室扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
};
状态={
伊斯莱顿：错，
标题：“打开灯”
}
onPress（）{
this.setState（{isLightOn:！this.state.isLightOn}）
console.log（this.state.isLightOn）
this.setState（{title:this.state.isLightOn==false？“关灯”：“关灯”}）
}
render（）{
返回(
);
}
}

首先，我想将isLightOn和title数据传递给我的LightButton类（这意味着我的无状态类）。之后，我想在无状态类中使用onPress函数，但不能使用。我认为这是一个错误：

超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环

我还使用LightButton onPress={this.onPress}删除了括号，但仍然出错

这是我的无状态类

const LightButton = ({onPress,isLightOn,title}) => (


        <View style={styles.red}>


            <Button
                title= {title}
                onPress={() => {}

                }
            />
        </View>
)

constlightbutton=（{onPress，isLightOn，title}）=>(
{}
}
/>
)

我想在这个类中使用onPress函数和数据。 因此，如何将函数和数据传递给该类

你做错的第一件事是你的状态实例化！ 您需要在

构造函数中实例化您的状态，如：

构造函数（道具、上下文）{
超级（道具、背景）；
this.state={counter:0}；
}

onPress（）

您在函数中使用此选项，这在react-native或任何其他语言中都是不推荐的，这些是react-native的专用函数和方法

对于传递参数或调用函数，最好使用以下模式==>

onPress={（）=>urFunction（）}

带括号或

onPress={urFunction}

不带括号

做修改我希望它有帮助你可以像这样分配它

---

---

如果需要在内部传递arg，也可以使用箭头函数

---

---

请注意，您要么根本不放置

（）

，要么两次放置

（）=>func（）

，以便在函数刚加载且未单击时不运行该函数

与您的问题直接无关，但这样做会让您遇到一些问题

---

---

setState

这是一个异步调用，因此第二个

setState

用法不保证按预期引用状态，请在一行中使用

setState（{…}，（）=>callback（））

或全部，并符合prev状态

---

---

这里的主要问题是，您需要使用箭头函数声明

onPress

，或者将其绑定到构造函数中组件的

this

值。否则它将无法访问正确的此值。除此之外，您将道具传递到组件的方式非常好

我还将

onPress

中的两个set state调用合并为一个，因为这样更容易

在LightButton中，我将其设置为将onPress功能向下传递到按钮：

const LightButton = ({ onPress, isLightOn, title }) => (
  <div style={{backgroundColor:'red'}}>
    <Button title={title} onPress={onPress} />
  </div>
);

你能展示一下你是如何使用

打开的
灯按钮的吗？我猜你是在做类似于
onPress={onPress（）}
？我有一个类似问题的答案：“在React中在组件之间共享函数的正确方法。”实际上有两种范例（首先！）。希望这有帮助！您是否有建议不要将
onPress
用作函数名的参考资料？我不认为这是正确的，但如果你有一个来源，我很乐意被纠正。由于它的专用功能，它不能被使用，我只是在推理和明确主题。正如我提到的，它不能被使用，但为什么不能呢？它只是一个javascript函数名。它不是像
构造函数那样的保留类方法。你有消息来源吗？文档中没有提到这一点，但最好不要使用它，因为它会在开发人员的头脑中引起一些冲突我不知道我认为你关于异步混淆的说法是正确的，但我不确定它是否能解决最大更新深度错误。我猜错误与你答案的第一部分有关，他们很可能是在做
onPress={onPress（）}
。一旦他们澄清了错误，你问题的第二部分也会很有帮助。
onPress={()=>onPress(someArg)}

 this.setState({isLightOn: !this.state.isLightOn})
 console.log(this.state.isLightOn)
 this.setState({title:this.state.isLightOn===false ?"Turn light off":"Turn light on"})

 this.setState({isLightOn: !this.state.isLightOn, title: !this.state.isLightOn===false ?"Turn light off":"Turn light on"})

const LightButton = ({ onPress, isLightOn, title }) => (
  <div style={{backgroundColor:'red'}}>
    <Button title={title} onPress={onPress} />
  </div>
);