React(dispatch与参数传递)

• 只允许两种形式

onClick={fn};

或

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

• 不能这么写

onClick={fn(id)};

• 此外

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

等效于

onClick={fn};

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

TodoList

 todos.map((item) => ( 
         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)
  TodoList

 todos.map((item) => ( 
        
        ))
......
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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。