Не уверен, правильно ли я использую контекст реагирования

Question

Я создал форму по реакции, и после некоторого исследования я думаю, что если вы не хотите использовать внешнюю библиотеку для управления формой, контекст может быть лучшим выбором, особенно в моем случае, когда ямного вложенных компонентов, составляющих его. Но я не уверен, что помещать функцию в мое состояние - это хорошо. Но позвольте мне дать вам некоторый код:

configuration-context.js

import React from 'react'

export const ConfigurationContext = React.createContext();

ConfigurationPanel.jsx

import React, { Component } from 'react'
import { Header, Menu, Grid } from 'semantic-ui-react'
import ConfigurationSection from './ConfigurationSection.jsx'
import {ConfigurationContext} from './configuration-context.js'


class ConfigurationPanel extends Component {


    constructor(props) {
        super(props)
        this.state = { 
            activeItem: '', 
            configuration: {
                       /* the configuration values */
              banana: (data) => /* set the configuration values with the passed data */
            }
        }

    }

    handleItemClick = (e, { name }) => this.setState({ activeItem: name })


    render() {
        return (
            <ConfigurationContext.Provider value={this.state.configuration}>
                <Grid.Row centered style={{marginTop:'10vh'}}>
                    <Grid.Column width={15} >   
                        <div className='configuration-panel'>

                    /* SOME BUGGED CODE */ 

                            <div className='configuration-section-group'>
                                {this.props.data.map((section, i) => <ConfigurationSection key={i} {...section} />)}
                            </div>
                        </div>
                    </Grid.Column>
                </Grid.Row> 
            </ConfigurationContext.Provider>
        )
    }
}

ConfigurationItem.jsx

import React, { Component } from 'react'
import { Input, Dropdown, Radio } from 'semantic-ui-react'
import {ConfigurationContext} from './configuration-context.js'

class ConfigurationItem extends Component {
    static contextType = ConfigurationContext


    constructor(props) {
        super(props)
    }

    handleChange = (e, data) => this.context.banana(data)

    itemFromType = (item) =>{
        switch (item.type) {
            case "toggle":
                return  <div className='device-configuration-toggle-container'> 
                            <label>{item.label}</label>
                            <Radio name={item.name} toggle className='device-configuration-toggle'onChange={this.handleChange} />
                        </div> 

            /* MORE BUGGED CODE BUT NOT INTERESTING*/

        }
    }

    render() {
        return this.itemFromType(this.props.item)
    }
}

Итак, в конце у меня есть ConfigurationContext, который является просто объявлением, все находится в родительском состоянии. То, что мне не нравится, - это помещать банановую функцию в состояние (в ней будет больше логики, чем просто ее регистрация). Что вы об этом думаете? Любое предложение приветствуется.

Спасибо

Answer 1

banana - это обычная функция, и вам не нужно переводить ее в состояние, просто выполните:

class ConfigurationPanel extends Component {
    banana = data => console.log(data)
    ...

    render() {
        return (
            <ConfigurationContext.Provider value={{banana}}>
    ...

}

После этого вы можете использовать this.context.banana(data) как обычно.