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

Question

我有问题，我没有找到答案，所以我尝试任何人可以帮助:

我有主应用组件:

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 ;

有谁知道为什么它不起作用吗?

Answer 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 ;