Question

我的情况是，我的子组件需要获得一个名为myDepartment的状态。如果我使用@connect从redux中获取该变量（假设此处的值为'deptA'），并从父组件prop中传递另一个具有相同名称（值为'deptB'）的变量，则myDepartment在子组件？

Answer 1

使用connect映射的道具会覆盖从父代传递的同名道具。因此，在您的示例中，myDepartment将始终具有值deptA。

只需通过一些代码进行澄清：

const MyComponent = connect((state) => ({
  myDepartment: state.myDepartment // 'deptA'
}))((props) => (
  <div>{props.myDepartment}</div>
))

// always renders <div>deptA</div>
const Wrapper = () => (
  <MyComponent myDepartment="deptB" /> 
)

Answer 2

尝试过后，似乎redux会优先于父级：

https://codesandbox.io/s/aged-violet-uoeg6?file=/src/App.js

但是，如果您要使用新的useSelector react-redux钩子（而不是连接）并且不分解道具，则它们将作为sharedProp和props.sharedProp并存（沙箱中的ChildTwo示例）。如果将道具分解为{sharedProp}，则将无法创建名为sharedProp的变量来存储useSelector返回。

道具如何反应从父组件和redux存储传递的合并状态

2 个答案: