Question

我有有一个按钮的弹出部件和按钮具有连接到它的回调函数。现在，我在两个不同的屏幕中使用此组件，并在渲染该组件时动态传递回调函数。但是，现在的问题是，它仅使所述第一部件和功能忽略第二部件功能

我尝试重命名import语句，但没有区别

Component.js

C:\

Page1.js

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

Page2.js

import Component from "Component.js"

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

<Component someAction={this.emailOne}>

在这里，当我单击第一个组件按钮时，它会警告“组件1电子邮件”，但第2页只是抛出一个错误，即函数EmailTwo未定义。

我正在使用React Navigation底部标签导航器在页面之间导航。我不知道为什么发生这种情况，我怎么能解决这个问题。

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

使用动态功能对本机自定义组件进行重用

1 个答案: