如何从类组件中导出函数？反应原生

Question

我有一个类组件，我需要将它的一个功能传递给抽屉并使用它，但不知道是否可以：

class Edit_note extends Component { 
  save_changes = async() => {
    let clear_content = this.state.content.replace(/ /g,""); //replace al   
    try {
      const data = JSON.parse(await AsyncStorage.getItem("data"));
      const index_to_find = this.array_notes.findIndex(obj => obj.note_number === this.note[0].note_number); 
      
      const edited_note = this.note.map((note) => {
        note.content = clear_content;
        return {...note}
      });
         
      this.array_notes.splice(index_to_find, 1, edited_note[0]);
      data.array_notes = this.array_notes; 
      await AsyncStorage.setItem("data", JSON.stringify(data));
    } catch(error) {
      alert(error);
    } 
  }
    
  render() {
    return (
      <>
        <Text>hi</Text>
      </>
    ); 
  }  
}
    
export default Edit_note;

这是我的类组件，我想导出函数save_changes并用在edit note的header中，放在图标里

import React, { Component } from "react";
import { Text, View } from "react-native";
import { Feather } from '@expo/vector-icons'; 
    
class Header extends Component {
  render() {
    return (
      <>
        <View style ={{backgroundColor: "white", flexDirection: "row", alignItems: "center"}}>
          <View>
            <Text style = {{color: "black", fontSize: 30, marginLeft: -20}}>{this.props.title}</Text>
          </View>
          <Feather name="check-square" size={24} color = "black" />
        </View>
      </>
    );
  }
}
    
export default Header;

我该怎么做？

Answer 1

你不能那样做。唯一的方法是从类中提取save_changes 作为实用程序，导出它并在需要传递正确参数的地方使用它。

在您拥有类组件的文件中，进行以下更改：

 export const save_changes = async(<Pass the parameter here>) => {
    
    let clear_content = this.state.content.replace(/&nbsp;/g,""); //replace al &nbsp; 

    try {
    
        const data = JSON.parse(await AsyncStorage.getItem("data"));
        const index_to_find = this.array_notes.findIndex(obj => obj.note_number === this.note[0].note_number); 
   
        const edited_note = this.note.map((note) => {
            note.content = clear_content;
            return {...note}
        });
   
        this.array_notes.splice(index_to_find, 1, edited_note[0]);
        data.array_notes = this.array_notes;
        await AsyncStorage.setItem("data", JSON.stringify(data));
     
    }catch(error) {
        alert(error);
    }

}    

class Edit_note extends Component { 



render() {

    return (
        <>
           <Text>hi</Text>
        </>
    );

}

}

 export default Edit_note;

现在您可以从该文件的任何位置导入save_changes 函数

Answer 2

要从您的组件中导出一个函数，您需要它是public static，并删除函数中所有this 的使用。 public 字表示可以从组件外部访问该函数，Edit_note.save_changes()。关键字static 用于使函数独立于组件的实例。

要从您的实例中导入您需要的数据，您可以将它们作为参数传递给您的函数save_changes。

因此，你应该有这样的东西：

  public static async save_changes (content, array_notes, note) {
    let clear_content = content.replace(/ /g,""); //replace al   
    try {
      const data = JSON.parse(await AsyncStorage.getItem("data"));
      const index_to_find = array_notes.findIndex(obj => obj.note_number === note[0].note_number); 
      
      const edited_note = note.map((note) => {
        note.content = clear_content;
        return {...note}
      });
         
      array_notes.splice(index_to_find, 1, edited_note[0]);
      data.array_notes = array_notes; 
      await AsyncStorage.setItem("data", JSON.stringify(data));
    } catch(error) {
      alert(error);
    } 
  }

然后，您可以在任何其他带有Edit_note.save_changes() 的组件中调用此函数，只要在组件的顶行也导入了组件Edit-note。