如何从类组件导出函数？ 反应本机

Question

I have a class component and I need to pass one of its function to the drawer and use it, but don't know if it's possible:

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;

this is my class component, and I want to export the function save_changes and use it in the header of edit note, put it in the icon

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;

How can I do that?

Answer 1

You can not do that. Only way is to extract save_changes out of the class as a utility, export it and use it where ever u need passing the right parameters.

In the file where you have your class component, make the following 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;

Now you can import the save_changes function anywhere from this file

Answer 2

To export a function from your component, you need it to be public static , and remove all usage of this within the function. The public word means that the function can be accessed from outside the component, with Edit_note.save_changes() . The keyword static is used to make the function independant of the component's instance.

To import the data you need from your instance, you can pass them as parameters in your function save_changes .

As a result, you should have something like this:

  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);
    } 
  }

And then, you can call this function in any other component with Edit_note.save_changes() , as long as the component Edit-note is imported as well at the top lines of the component.