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

【问题标题】：How to pass function between multiple components in React Native如何在 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。它在组件内部正确流动吗？我们错过了什么吗？

标签： react-native function components

【解决方案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”。很抱歉，感谢您的宝贵时间。