javascript - 当事件处理程序从另一个事件处理程序被 react 和减少时附加到组件上

Question

我正在开发一个带有 React 和 Redux 的拖放应用程序，我想在组件触发事件处理程序 (ondragstart) 时在容器内附加一个 div。

拖拽的组件制作如下:

import React, {Component} from 'react'

import {classify} from '../functions/functions'

export default class Actions extends Component {
    constructor(props){
        super(props)
        this.state={opacity : 1};
        this.dragstart = this.dragstart.bind(this)
        this.dragend = this.dragend.bind(this)
    }
    dragstart(e){
            this.setState({opacity : .4});
            let id = e.target.id;
    }
    dragend(){
        this.setState({opacity : 1});
    }
    render(){
        
        let name = classify(this.props.name);
        return  <div className={this.props.class} draggable='true' onDragStart={this.dragstart} onDragEnd={this.dragend} style={this.state}>
                    <img className="default actions-icon" src={'./icons/'+name+'/'+name+'-.svg'}/>
                    <span className="default">{name}</span>
                </div>
    }
}

我要添加元素的组件:

import React, {Component} from 'react'

import Action from './actions'

class Activity extends component{
     
    render(){
        const initialState = {
            drag: 'Off'
          }
        let Actions = this.props.tasks.map((task)=> <Action key={task.name} name={task.name} class='default1 activity'/>)
        return  <div id={this.props.id} className='default1 phase' >
                    {Actions}
                </div>
    }
}

export default Activity

它将成为该组件的子组件:

从 'react' 导入 React，{Component}

import Action from './actions'
//import Activity from './activity'

import {actions} from '../variables/variables'

export default class Actionsbar extends Component {
    render(){
        return <div id='process-display' className='default'>
                    <div id='pase-0' className='default1 phase'>
                        <Action key='debut' name='debut' class='default1 activity'/>
                    </div>
                    <div id='pase-1' className='default1 phase'>
                    </div>
                </div>
        
    }
}

我是 React 和 Reduce 的新手，我无法理解在商店中存储状态并将其与组件连接的想法。

提前致谢。

Answer 1

在redux的store中存储UI状态感觉很奇怪。组件的 UI 状态应该存储在组件的状态中，并在 props 中传递给子组件。

如果组件在组件层次结构中距离太远，是的，您可以使用 redux，但在这样做之前请三思，因为代码的复杂性会增加。