react props 如何合並從父組件傳遞的 state 和 redux 存儲

Question

我的情況是，我的子組件需要獲得一個名為 myDepartment 的 state。 如果我使用@connect 從 redux 獲取該變量（假設這里的值是'deptA'）並從父組件道具傳遞另一個具有相同名稱的變量（值為'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 示例）。 如果你將 props 解構為 {sharedProp}，那么你將無法創建一個名為 sharedProp 的變量來存儲 useSelector 返回。