将参数传递给 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);
};