如何在 React Native 中的多个组件之间传递函数

Posted 2023-02-23

【中文标题】如何在 React Native 中的多个组件之间传递函数

【英文标题】：How to pass function between multiple components in React Native

【发布时间】：2021-04-29 02:47:34

【问题描述】：

我有问题，但我没有找到答案，所以我尝试任何可以提供帮助的人：

我有主要的应用程序组件：

export default class App extends React.Component 
constructor(props) ...

openSettings = () =>  ....some changing state

render()
return (...
<Settings openSettings=() =>this.openSettings()/>
      );
...;

我的设置文件：

const Settings = (openSetting) => 
    return (
      <MyHeader openSetting=openSetting></MyHeader>...
    )
export default Settings;

我想将 openSetting 传递给另一个文件：

const MyHeader = (openSetting) => 
    return (
      <Text onPress=openSetting>Open it!</Text>
    )
export default MyHeader ;

有人知道它为什么不起作用吗？

【问题讨论】：

无法理解你的问题，你的意思是要将函数“openSettings”传递给不同文件中的多个组件？

参见上面的代码，我想将 openSetting 从 Settings 传递给 MyHeader 作为 onPress 动作。 Settings 和 MyHeader 在不同的文件中。

我可以看到您在组件之间正确传递函数。你有什么错误？请提供更多详细信息

它在“主应用”和“设置”之间工作。但我需要这个流程：App -> Settings ->MyHeader（它什么都不做）

您的流程正是您所说的，它来自 App -> Settings -> MyHeader。它在组件内部正确流动吗？我们错过了什么吗？

【参考方案1】：

可能是您的代码中的拼写错误导致了这个问题，并且它不起作用。

您创建了一个名为 openSettings 的函数，但您将 props 作为 openSetting 发送。尝试正确地编写道具名称而不是拼写错误，它应该可以工作。

export default class App extends React.Component 
constructor(props) ...

openSettings = () =>  ....some changing state

render()
return (...
<Settings openSettings=() =>this.openSettings()/> //<== Check this line
      );
...;

const Settings = (openSettings) =>  //<== Check this line
    return (
      <MyHeader openSettings=openSettings></MyHeader>... //<== Check this line
    )
export default Settings;


const MyHeader = (openSettings) =>  //<== Check this line
    return (
      <Text onPress=openSettings>Open it!</Text> //<== Check this line
    )
export default MyHeader ;

【讨论】：

你说得对，它有效 - 错误的错字“openSettings”与“openSetting”。很抱歉，感谢您的宝贵时间。