dispatch作用 react_React(dispatch与参数传递)

只允许两种形式onClick={fn};

或

onClick={()=>{fn()}};

//onClick={()=>{fn(id)}};

不能这么写onClick={fn(id)};

此外onClick={()=>{fn()}};

等效于

onClick={fn};

第1种写法(由父组件dispatch,参数不流入TodoItem)

TodoList

todos.map((item) => (

......

onToggle={() => onToggleTodo(item.id)}

onRemove={() => onRemoveTodo(item.id)}

/>

))

......

const mapDispatchToProps = (dispatch) => {

return {

onToggleTodo: (id) => {

dispatch(toggleTodo(id));

},

onRemoveTodo: (id) => {

dispatch(removeTodo(id));

}

};

};

TodoItem

{onToggle()}} />

{onRemove()}}>×

//这么写很蠢

或

×

或

×

......

const mapDispatchToProps = (dispatch,ownProps) => {

return {

onToggle:()=>{

ownProps.onToggle();

},

onRemove:()=>{

ownProps.onRemove();

}

};

};

第2种写法(由父组件dispatch,参数流入TodoItem)

TodoListtodos.map((item) => (

......

id={item.id}

onToggle={onToggleTodo}

onRemove={onRemoveTodo}

/>

))

......

const mapDispatchToProps = (dispatch) => {

return {

onToggleTodo: (id) => {

dispatch(toggleTodo(id));

},

onRemoveTodo: (id) => {

dispatch(removeTodo(id));

}

};

};

TodoItem

{onToggle(id)}} />

{onRemove(id)}}>×

或

×

.........

const mapDispatchToProps = (dispatch,ownProps) => {

return {

onToggle:()=>{

ownProps.onToggle(ownProps.id);

},

onRemove:()=>{

ownProps.onRemove(ownProps.id);

}

};

};

第3种写法(由子组件dispatch,参数不流入TodoItem)这是不可能的

第4种写法(由子组件dispatch,参数流入TodoItem)

TodoList

TodoItem

×

......

const mapDispatchToProps = (dispatch,ownProps) => {

return {

onToggle: () => {

dispatch(toggleTodo(ownProps.id));

},

onRemove: () => {

dispatch(removeTodo(ownProps.id));

}

};

};

作者：余生筑

链接：https://www.jianshu.com/p/e596191ae7bc

来源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

标签：参数传递,TodoItem,onRemove,dispatch,React,ownProps,onToggle,id

来源： https://blog.csdn.net/hsany330/article/details/90701192