從另一個whithreact觸發事件處理程序並減少事件時，將div附加到組件上

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

wich將成為該組件的子組件：

從'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

將UI狀態存儲在redux的商店中感覺很奇怪。 組件的UI狀態應存儲在組件的狀態中，並傳遞給props中的子代。

如果組件在組件層次結構中距離太遠，可以使用redux，但是在這樣做之前請三思，因為代碼的復雜性會增加。