Вызов функции, исходящей из реквизита [Реагировать]

#reactjs

Вопрос:

У меня есть компонент AlertError , который отображает сообщение, поступающее из реквизита, и я хочу onClick , чтобы в этом сообщении также вызывалась функция, поступающая из реквизита,

Эта вызываемая функция отличается в зависимости от родительских компонентов AlertError ,

Мне удалось отобразить сообщение, но функция не выполняется,

Я показываю вам небольшой воссозданный пример, чтобы спросить вас, что в этом плохого,

Компонент 1

 function Component1() {
  function one() {
    console.log("one");
  }
  
  return <AlertError message="one" function={() => one()} />
}

Компонент 2

 function Component2() {
  function two() {
    console.log("two");
  }
  
  return <AlertError message="two" function={() => two()} />
}

Предупреждение о компонентах

 function AlertError() {
  return <div onClick={props.function}>{props.message}</div>
}

1. Не могли бы вы, пожалуйста, создать для этого Stackblitz или кодовый файл? Я не вижу никаких проблем в вашем коде?

2. Вот рабочая демонстрация stackblitz.com/edit/react-h3f8e9?file=src/App.js

3. ответчик ниже исправил это, мой файл не был сохранен, и я забыл передать реквизиты в качестве параметров оповещения, спасибо за потраченное время

Ответ №1:

Ты забыл реквизит

 function AlertError(props) {  //<--- props here
  return <div onClick={props.function}>{props.message}</div>
}

https://codesandbox.io/s/relaxed-monad-isuqf?file=/src/App.js

1. он работает в codesandbox. Может быть, вы делаете что-то, что не отражено в предоставленном вами коде?

2. хорошо, извините, мой файл не был сохранен, props он не был эффективным. Я отмечу ваш ответ как принятый. Какой позор, лол

Ответ №2:

 <div role='button' onClick={props.function}>{props.message}</div>

добавить роль div в качестве кнопки