Блог

Я новичок в react и пытаюсь понять, как работают такие вещи, как props. Я хочу иметь это, чтобы я мог передать функцию, которую я знаю, как сделать, но я хочу сделать это с некоторым аргументом. Я знаю, что мой оператор 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;
  }
}
 

Это, наверное, глупый вопрос, мне просто трудно разобраться в реквизите и в том, как это работает. Независимо от того, сколько я читаю или смотрю, я просто не понимаю:(.

* Редактировать: мне показалось, что 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 , а аргументы идут после этого. Вероятно, вам не нужен a this , поскольку вы используете функциональные компоненты, поэтому null обычно подходит.

О, и, конечно, вы должны добавить свой аргумент в определение вашей функции:

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