React(dispatch与参数传递)

• 只允许两种形式

onClick={fn};

或

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

• 不能这么写

onClick={fn(id)};

• 此外

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

等效于

onClick={fn};

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

TodoList

 todos.map((item) => ( 
        <TodoItem      
          ......
          onToggle={() => onToggleTodo(item.id)}
          onRemove={() => onRemoveTodo(item.id)}
        />
        ))
......
const mapDispatchToProps = (dispatch) => {
  return {
    onToggleTodo: (id) => {
      dispatch(toggleTodo(id));
    },
    onRemoveTodo: (id) => {
      dispatch(removeTodo(id));
    }
  };
};

TodoItem

<input ... onClick={() => {onToggle()}} />
 <button ... onClick={()=>{onRemove()}}>×</button>
//这么写很蠢

或

<input ... onClick={onToggle} />
 <button ... onClick={onRemove}>×</button>

或

<input ... onClick={onToggle} />
 <button ... onClick={onRemove}>×</button>
......
const mapDispatchToProps = (dispatch,ownProps) => {
  return {
   onToggle:()=>{
    ownProps.onToggle();
  },
   onRemove:()=>{
    ownProps.onRemove();
  } 
  };
};

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

 todos.map((item) => ( 
        <TodoItem
          ......
          id={item.id}
          onToggle={onToggleTodo}
          onRemove={onRemoveTodo}
        />
        ))
......
const mapDispatchToProps = (dispatch) => {
  return {
    onToggleTodo: (id) => {
      dispatch(toggleTodo(id));
    },
    onRemoveTodo: (id) => {
      dispatch(removeTodo(id));
    }
  };
};

TodoItem

<input ... onClick={() => {onToggle(id)}} />
 <button ... onClick={()=>{onRemove(id)}}>×</button>

或

<input ... onClick={onToggle} />
 <button ... onClick={onRemove}>×</button>
.........
const mapDispatchToProps = (dispatch,ownProps) => {
  return {
   onToggle:()=>{
    ownProps.onToggle(ownProps.id);
  },
   onRemove:()=>{
    ownProps.onRemove(ownProps.id);
  } 
  };
};

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

这是不可能的

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

TodoItem

<input ... onClick={onToggle} />
 <button ... onClick={onRemove}>×</button>
......
const mapDispatchToProps = (dispatch,ownProps) => {
  return {
    onToggle: () => {
      dispatch(toggleTodo(ownProps.id));
    },
    onRemove: () => {
      dispatch(removeTodo(ownProps.id));
    }
  };
};

作者：余生筑
链接：https://www.jianshu.com/p/e596191ae7bc
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。