Reactjs 不确定我是否'；我正确地使用了反应上下文

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

配置上下文.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>
        )
    }
}

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

import React，{Component}来自“React”
从“语义ui反应”导入{标题、菜单、网格}
从“./ConfigurationSection.jsx”导入ConfigurationSection
从“./configuration context.js”导入{ConfigurationContext}
类配置面板扩展组件{
建造师（道具）{
超级（道具）
this.state={
活动项：“”，
配置：{
/*配置值*/
香蕉：（数据）=>/*使用传递的数据设置配置值*/
}
}
}
handleItemClick=（e，{name}）=>this.setState（{activeItem:name}）
render（）{
返回(
/*一些有缺陷的代码*/
{this.props.data.map（（节，i）=>）}
)
}
}

ConfigurationItem.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>
        )
    }
}

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

import React，{Component}来自“React”
从“语义ui react”导入{Input，Dropdown，Radio}
从“./configuration context.js”导入{ConfigurationContext}
类配置项扩展了组件{
静态contextType=ConfigurationContext
建造师（道具）{
超级（道具）
}
handleChange=（e，data）=>this.context.banana（data）
itemFromType=（项目）=>{
开关（项目类型）{
案例“切换”：
返回
{item.label}
/*更多有缺陷的代码，但并不有趣*/
}
}
render（）{
返回此.itemFromType（此.props.item）
}
}

最后，我有一个ConfigurationContext，它只是一个声明，所有内容都在父状态内。 我不喜欢的是将香蕉函数放在状态中（它将有更多的逻辑，而不仅仅是记录它） 你觉得怎么样？ 如有任何建议，我们将不胜感激

---

谢谢

香蕉

只是一个常规功能，您无需将其置于状态，只需执行以下操作：

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

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

}

类配置面板扩展组件{
香蕉=数据=>console.log（数据）
...
render（）{
返回(
...
}

---

之后，您可以正常使用

this.context.banana（数据）

。

banana

只是一个常规函数，您不必将其置于状态，只需执行以下操作：

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

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

}

类配置面板扩展组件{
香蕉=数据=>console.log（数据）
...
render（）{
返回(
...
}

---

之后，您可以使用

this.context.banana（数据）

正常。

是的，很抱歉我的代码不清楚……通常函数会用表单的当前编辑项设置状态，该项将传递给组件，我不能仅用函数设置上下文的值，然后您可以简单地将函数内容更改为

banana=>data=>this.setState（{key:data}）

好吧，我的代码是通过香蕉函数中的一些逻辑来实现的，但问题是，我不确定在我的状态中放置一个函数来更新上下文是否是一件好事只要代码有效，就没有正确的反应方式。如果你的问题是关于约定的，那么不，我不太经常看到这种模式，我不建议您这样做，因为这会使状态复杂化，并可能会使阅读您的代码的其他人感到困惑。也许您可以在React Hook中阅读有关useState的更多信息，以了解他们如何正确实现它。是的，很抱歉，我的代码不清楚……实际上，函数将使用表单的当前编辑项设置状态，该项将传递给componente，我不能仅使用函数设置上下文的值，然后您可以简单地将函数内容更改为

banana=>data=>this.setState（{key:data}）

好吧，我的代码是通过香蕉函数中的一些逻辑来实现的，但问题是，我不确定在我的状态中放置一个函数来更新上下文是否是一件好事只要代码有效，就没有正确的反应方式。如果你的问题是关于约定的，那么不，我不太经常看到这种模式，我不建议您这样做，因为这会使状态复杂化，并可能会使阅读您的代码的其他人感到困惑。也许您可以在React Hook中阅读更多关于useState的内容，以了解他们如何正确地实现它。