将参数传递给 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 在询问如何“传递”函数和参数。如果您真的想使用 child 元素中提供的参数调用该函数，则要容易得多。您像上面那样传入函数，并在 child 元素中调用它：

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>);
}

原始答案：如果要在 parent 元素中设置参数，您可以执行以下两种操作之一：箭头函数或 .bind。两者都会起作用。然后你会在 child 中调用它而根本没有任何参数，比如 props.setScreen()...因为参数是 parent.

中的 hard-coded

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);
};

将参数传递给 props react-native？

Passing arguments into props react-native?

javascript

mobile

reactjs

react-native