将参数传递给props react-native?

Question

我是新的反应，我试图弄清楚像道具这样的东西是如何工作的。我想有它，这样我就可以传递一个函数，我知道怎么做，但我想用一些参数来做。我知道我的switch语句是有效的，因为如果我手动设置值，它会按预期工作。我只是太蠢了，想不明白。下面是我的代码:

export default function App() {
const [screen, setScreen] = useState(0);
const setScreenState = () => { //I want to be able to pass an argument into here so that i can set the screen that is shown with my switch statement.
console.log("setting screen");
};
switch (screen) {
case 0:
return <WelcomeScreen setScreen={setScreenState} />;
break;
case 1:
return <ViewImageScreen setScreen={setScreenState} />;
break;
case 2:
return <ViewHelp setScreen={setScreenState} />;
break;
}
}

这可能是一个愚蠢的问题，我只是很难理解道具和它是如何工作的。不管我读了多少书，看了多少电视，我就是不懂。

Answer 1

*编辑:在我看来，OP是在问如何"传递";函数和参数都有。如果你真的想用子元素中提供的参数来调用函数，那就简单多了。像上面那样传入函数，并在子元素中调用它:

function WelcomeScreen(props){
// you can invoke here if you want
props.setScreen('my value');
// or you can invoke in an event
return (<button onClick={e=> props.setScreen('my value')}>Click me!</button>);
}

原来的答案:如果你想在父元素中设置参数，你可以做两件事中的一件:一个箭头函数，或者.bind。两者都可行。然后你可以在没有参数的情况下调用它，比如props.setScreen()…因为参数是在父类中硬编码的。

return <WelcomeScreen setScreen={()=> setScreenState('parameter i want to set')} />

或使用。bind

return <WelcomeScreen setScreen={setScreenState.bind(null, 'parameter i want to set')} />

注意，对于.bind，第一个参数是this的值，然后是参数。你可能不需要this，因为你正在使用功能组件，所以null通常是好的。

哦，当然你必须在函数定义中添加你的参数:

const setScreenState = (myArg) => { 
console.log("setting screen: " + myArg);
};