Блог

Главная - Вопросы по программированию - Как передать параметры в функцию в контексте Reactjs

Как передать параметры в функцию в контексте Reactjs

#reactjs #react-redux #react-context

Вопрос:

Мне нужно вызвать параметризованную функцию, которая находится в контексте из другого компонента. Ниже приведен фрагмент кода.

Контекст

 Sortdata=(id)=> {
        console.log("passed from homepage",id)
         if(this.state.data>parseInt(id)){
        recorddata.sort((a,b)=>{
            let da = new Date(a.inspectioN_DT),
            db = new Date(b.inspectioN_DT);
        return da - db;}
    });
        console.log(recorddata);
        this.setState({
            listvalues: recorddata
        })
    }

 render() { 
        return ( 
            <DataContext.Provider value={{...this.state, sortData: this.Sortdata }}>
                {this.props.children}
            </DataContext.Provider>
           
         );
    }

Мне нужно вызвать вышеуказанную функцию Sortdata() из моего домашнего компонента.Пожалуйста, предложите мне способ вызвать эту функцию или альтернативу, используя сам контекст react. Заранее спасибо.

Комментарии:

1. попробуйте это reactjs.org/docs/context.html , гораздо быстрее, чтобы вы начали.

Ответ №1:

Сначала создайте свой контекст

 const DataContext= React.createContext('');

Передайте значение, которое вы уже сделали (которое является объектом с функцией).

  <DataContext.Provider value={{...this.state, sortData: this.Sortdata }}>

Доступ к контексту (должен быть внутри провайдера)

 const value = useContext(DataContext);

Пример вызова функции:

 value.sortData(3);

Смотрите больше на: https://reactjs.org/docs/hooks-reference.html#usecontext и https://reactjs.org/docs/context.html

Комментарии:

1. Привет @anthony_718 , я пробовал этот метод, но он показывает ошибку, так как sortData не является функцией. Я хочу использовать вызов этой функции из другого компонента класса. В настоящее время я получаю доступ к состоянию в контексте, как показано ниже static contextType = DataContext; const {Userlist, Roles, Devices} = this.context;

Метки: