Javascript 如何从不同的模块调用React本机类中的函数

在我的应用程序中，我在xyz.js模块中定义了一个默认类a，它在我的导航堆栈中呈现一个页面。根据A类的状态变量之一，渲染的视图会有所不同。例如，如果应用程序处于“编辑模式”，则除了在应用程序不处于“编辑模式”时渲染的其他标准视图外，还将渲染编辑视图。我不知道如何从不同的模块abc.js更改该状态变量，并使与实例化的类a关联的视图重新呈现。在我的模块abc.js中，我创建了导航堆栈，我有一个用于触摸高光按钮的onPress处理程序，用于将应用程序置于“编辑模式”。在该处理程序中，我尝试调用类a中的函数“Edit（）”，但该函数似乎没有被调用。它可能与绑定有关，但我并不完全理解这个概念

以下是我所拥有的：

模块abc.js：

import XYZ from './xyz';
import {Edit} from './xyz';
import { pencilEditButton } from './Images';

const App = createStackNavigator(
{
    Home: {
        screen: My App,

        navigationOptions: ({ navigation }) => ({
            title: 'myApp',

            headerRight: (
            <View>
                <TouchableHighlight
                    onPress={() => Edit()}
                    underlayColor="gray">
                    <View>
                        <Image source={pencilEditButton} style={styles.navigationButtonImage} />
                    </View>
                </TouchableHighlight>
            </View>
            ),
        }),
    },
}
);

export default createAppContainer(App);

从“/XYZ”导入XYZ；
从“/xyz”导入{Edit}；
从“./Images”导入{pencilEditButton}；
const App=createStackNavigator(
{
主页：{
屏幕：我的应用程序，
导航选项：（{navigation}）=>({
标题：“myApp”，
头灯：(
编辑（）}
参考底色=“灰色”>
),
}),
},
}
);
导出默认createAppContainer（应用程序）；

模块xyz.js：

export default class XYZ extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        editMode: false,    
    };
  };


  // Create a method to handle the press of the edit button on the navigation bar
  Edit() {
    console.log("editMode: ", editMode);
    this.setstate({ editMode: true });
    console.log("editMode: ", editMode);
    alert('User wants to edit a mix!');
  };

render() {
  return (
        <View style={styles.container}>
           { this.state.editMode === true ?
             <TouchableHighlight 
                    onPress={this._onXPressed} 
                    underlayColor="white">
                <View style={[styles.flowRight, styles.controlButton]}>
                    <Text style={styles.buttonText}>{'Edit Mode'}</Text>
                </View>
            </TouchableHighlight>
             :

             <TouchableHighlight 
                    onPress={this._onYPressed} 
                    underlayColor="white">
                <View style={[styles.flowRight, styles.controlButton]}>
                    <Text style={styles.buttonText}>{'Non Edit Mode'}</Text>
                </View>
            </TouchableHighlight>
           }
        </View>
     );
   }
 }

导出默认类XYZ扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
编辑模式：false，
};
};
//创建一个方法来处理按下导航栏上的编辑按钮
编辑（）{
log（“editMode:”，editMode）；
this.setstate（{editMode:true}）；
log（“editMode:”，editMode）；
警报（'用户想要编辑混音！'）；
};
render（）{
返回(
{this.state.editMode===true？
{“编辑模式”}
:
{“非编辑模式”}
}
);
}
}

---

如您所见，在模块XYZ.js的类XYZ中的构造函数后面有一个名为“Edit（）”的函数。按下编辑按钮时，从模块abc.js调用此函数。但当按下编辑按钮时，状态不会更新，警报视图不会显示，视图也不会重新渲染。如何正确调用Edit（），以便更新状态变量“editMode”并重新渲染视图？

如果要遵循正在使用的模式，则需要在“我的应用”组件中设置句柄，该组件在堆栈导航器中获取渲染。你必须使用 通过下面的代码示例了解如何调用Edit函数

import XYZ from './xyz';

export default class MyApp extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'myApp',
    headerRight: navigation.state.params && navigation.state.params.edit ? (
      <View>
        <TouchableHighlight
          onPress={() => navigation.state.params.edit()}
          underlayColor="gray"
        >
          <View>
            <Image source={pencilEditButton} style={styles.navigationButtonImage} />
          </View>
        </TouchableHighlight>
      </View>
    ) : null,
  })

  constructor(props) {
    super(props);
    this.onEdit = this.onEdit.bind(this);
  }

  componentDidMount() {
    this.props.navigation.setParams({ edit: this.onEdit });
  }

  onEdit() {
    if (this.xyz_Ref) {
      this.xyz_Ref.Edit();
    }
  }

  render() {
    return (
      <View>
        <XYZ ref={ref => this.xyz_Ref = ref} />
      </View>
    );
  }
}

从“/XYZ”导入XYZ；
导出默认类MyApp扩展React.Component{
静态导航选项=（{navigation}）=>({
标题：“myApp”，
headerRight:navigation.state.params&&navigation.state.params.edit(
navigation.state.params.edit（）}
underlayColor=“灰色”
>
)：null，
})
建造师（道具）{
超级（道具）；
this.onEdit=this.onEdit.bind（this）；
}
componentDidMount（）{
this.props.navigation.setParams（{edit:this.onEdit}）；
}
onEdit（）{
如果（此.xyz_参考）{
这个.xyz_Ref.Edit（）；
}
}
render（）{
返回(
this.xyz_Ref=Ref}/>
);
}
}

您在哪个模块或文件中实际使用了

xyz

作为组件？我一直在试验您建议的答案。你的评论让我怀疑我的设计模式是否合适。因此，我试图将静态导航选项（{…}）子句移动到我的模块xyz.js中。我认为这消除了裁判的必要性，看起来应该是直截了当的。对代码的唯一更改是onPress行。我把它改为onPress={（）=>this.\u Edit}。但我得到一个错误“undefined不是对象（计算'\u this3.Edit'）”。我意识到我偏离了主题，但你知道我为什么会出现这个错误吗？你在你的组件中调用的是头组件中的编辑方法。但是header组件无法访问组件上下文。因此，我们必须使用navigation.state传递对Edit方法的引用，这就是componentDidMount使用this.props.navigation.setParams（{Edit:this.onEdit}）的原因；行设置编辑方法引用，并使用navigation.state.paramsy访问标题中的方法。您的设计模式有些混乱。您可以不使用out，而使用refs尝试将一个标志作为isEditOn传递给XYZ组件，并相应地更改组件内部的UI和逻辑。