Реагируйте на повторное использование собственного компонента с динамической функцией

Question

У меня есть всплывающий компонент, который имеет кнопку, и к этой кнопке прикреплена функция обратного вызова.Теперь я использую этот компонент на двух разных экранах и динамически передаю функцию обратного вызова при рендеринге компонента.Но теперь проблема в том, что он только визуализирует функцию первого компонента и игнорирует функцию второго компонента

Я попытался переименовать оператор импорта, но без разницы

Component.js

class actions extends Component {
render() {
  return (
       <Modal>
          <Button block  onPress={()=>{this.props.someAction()}}>
             <Text>Action Button</Text>
           </Button>
        </Modal>
        )
}

Page1.js

import Component from "Component.js"

emailOne(){
   alert("Component 1 Email");
}

<Component someAction={this.emailOne}>

Page2.js

import Component from "Component.js"

emailTwo(){
   alert("Component 2 Email");
}

<Component someAction={this.emailTwo}>

Здесь, когда я нажимаю на кнопке компонента на странице один, появляется предупреждение «Электронная почта компонента 1», но страница 2 просто выдает ошибкуфункция emailTwo не определена.

Я использую навигацию в нижней вкладке реагирования для навигации между страницами.Я понятия не имею, почему это происходит и как я могу это исправить.

Answer 1

Просто попробуйте вот так

 class actions extends Component {
      render() {
         const {actionOne, actionTwo, actionThree} = this.props
          return (
           <Modal>
            <TouchableOpacity  onPress={actionOne}>
               <Text>Action Button one</Text>
            </TouchableOpacity>
             <TouchableOpacity  onPress={actionTwo}>
               <Text>Action Button two</Text>
            </TouchableOpacity>
              <TouchableOpacity  onPress={actionThree}>
               <Text>Action Button three</Text>
            </TouchableOpacity>
           </Modal>
       )
   }

   Page1.js

 import Component from "Component.js"

     emailOne= () =>{
         alert("Component 1 Email");
         }
     emailTwo= () =>{
         alert("Component 1 Email");
         }
    emailThree= () =>{
         alert("Component 1 Email");
         }

   <Component actionOne={()=>{this.emailOne()}}
              actionTwo={()=>{this.emailTwo()}} 
              actionThree={()=>{this.emailThree()}}>


      Page2.js

       import Component from "Component.js"

            emailFour = () =>{
              alert("Component 2 Email");
             }
            emailFive = () =>{
              alert("Component 2 Email");
             }
         emailSix = () =>{
              alert("Component 2 Email");
             }

         <Component actionOne={()=>{this.emailFour()}}
              actionTwo={()=>{this.emailFive()}} 
              actionThree={()=>{this.emailSix()}}>

Пример закуски: https://snack.expo.io/r1Ch1azEV