[英]append div on a component when an event handler is fired from another one whithreact and reduce
Hi i'm working on a drag and drop app with react and redux and i want to append a div inside a container when an event hander (ondragstart) is fired from a component. 嗨,我正在使用react和redux拖放应用程序,我想在从组件触发事件处理程序(ondragstart)时在容器内附加一个div。
the draagged component is made as follow : 拖动的组件如下所示:
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>
}
}
the component i want to append an element on : 我要在上添加元素的组件:
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 will become a child of this component : wich将成为该组件的子组件:
import React, {Component} from 'react' 从'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>
}
}
i'm new with react and reduce and i can't get the idea of storing state on the store and connect it with the component. 我是React和Reduce的新手,我不知道在商店中存储状态并将其与组件连接的想法。
thanks in advance. 提前致谢。
It feels weird to store UI state in redux's store. 将UI状态存储在redux的商店中感觉很奇怪。 UI State of the component should be stored in your component's state, and passed to children within props.
组件的UI状态应存储在组件的状态中,并传递给props中的子代。
If components are too far away in the component's hierarchy yeah you can use redux, but think twice before doing that since the complexity of the code increases. 如果组件在组件层次结构中距离太远,可以使用redux,但是在这样做之前请三思,因为代码的复杂性会增加。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.