Question

我发现react-redux的connect会直接将容器的ownProps传递给表示组件，但官方文档并没有提醒。还有其他人发现了吗？

const TodoApp = () => (
    <div>
        <AddTodo name="swf" onClick={age => console.log(age)} />
        <VisibleTodoList />
        <Footer />
    </div>
);

这里AddTodo是一个容器，如下所示：

let AddTodo = ({dispatch, name, onClick}) => {
    let input;
    console.log('name:', name);
    return (
        <div>
            <input ref={node => input = node}></input>
            <button onClick={e => {
                onClick('1000');
                dispatch(addTodo(input.value));
                input.value = '';
            }}>
               Add Todo
            </button>
        </div>
    );
};

AddTodo = connect()(AddTodo);

console.log确实打印出正确的单词'swf'，onClick回调也会打印正确的数字1000.但是，我没有手动传递这两个道具......

Answer 1

是的，ownProps作为connect中的可选第二个参数传递。它通常看起来像：

function mapStateToProps(state, ownProps) {

   return {
      reduxProp: state.reducer,
      ownProp: ownProps.prop
   };
}

但确实在文档中at least on GitHub：

如果你的mapStateToProps函数被声明为带两个参数，它将被调用，其中store状态作为第一个参数，props作为第二个参数传递给连接组件，并且每当连接组件时也会被重新调用接收由浅层平等比较确定的新道具。（第二个参数通常按惯例称为ownProps。）

要回答您的问题，它还会在文档中指出，如果没有参数传递给mapStateToProps，则ownProps和state都会被传递。

没有强制参数或两个参数的函数将接收ownProps。

在您的情况下，您甚至没有指定特定的mapStateToProps功能，只需拨打电话connect。所以我相信react-redux将此视为对mapStateToProps的空参数的调用，因此ownProps被传递。

react-redux的connect是否直接将容器的ownProps传递给表示组件？

1 个答案: