不确定我是否正确使用反应上下文

Question

我在 react 中创建了一个表单，经过一些研究，我认为如果您不想使用外部库来管理表单，那么上下文可能是最好的选择，尤其是在我的情况下许多组成它的嵌套组件。 但是，我不确定在我的状态中放置一个函数是一件好事。 但是让我给你一些代码：

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)了。