Блог

У меня есть компонент класса, и мне нужно передать одну из его функций в ящик и использовать ее, но я не знаю, возможно ли это:

 class Edit_note extends Component { 
  save_changes = async() => {
    let clear_content = this.state.content.replace(/amp;nbsp;/g,""); //replace al amp;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);
    } 
  }
    
  render() {
    return (
      <>
        <Text>hi</Text>
      </>
    ); 
  }  
}
    
export default Edit_note;
  

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

 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;
  

Как я могу это сделать?

Вы не можете этого сделать. Единственный способ — извлечь save_changes из класса как утилиту, экспортировать ее и использовать там, где когда-либо потребуется передача правильных параметров.

В файле, в котором у вас есть компонент класса, внесите следующие изменения:

  export const save_changes = async(<Pass the parameter here>) => {
    
    let clear_content = this.state.content.replace(/amp;nbsp;/g,""); //replace al amp;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 функцию из любого места из этого файла

Чтобы экспортировать функцию из вашего компонента, вам нужно, чтобы она была 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(/amp;nbsp;/g,""); //replace al amp;nbsp; 
    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 также импортируется в верхние строки компонента.