将“导航”和“道具”传递给子组件

Posted 2023-02-23

【中文标题】将“导航”和“道具”传递给子组件

【英文标题】：Passing 'navigation' AND 'props' to child components

【发布时间】：2021-03-27 07:36:03

【问题描述】：

通常通过导航，您会收到像这样的子组件上的道具，带有花括号：

const MatchHistoryScreen = ( navigation, route ) => 

但我相信你没有花括号的道具，像这样：

const MatchToggleComponent = (props) => 

那么如何为子组件结合“导航”和“道具”？将“道具”放在花括号中对我不起作用。我认为一个潜在的用例是，如果您将 App.js 中的道具与导航道具一起传递。

【问题讨论】：

你试过记录道具吗？因为你说的“花括号”只是解构，所以你也应该在 props 对象内有导航。因此，只需执行(props) 并尝试查看您拥有的所有属性。

哦，是的，我明白了！所以你可以像 props.navigation 和 prop.route 一样。你提到的“解构”：为什么你用大括号来写导航和路线，但“道具”不是用大括号？是不是因为 'props' 在层次结构中位于顶部，而其他所有内容都在它之下，并且通过指定 navigation, route 意味着您会自动定位同名的 props.navigation 和 props.route？

添加了答案。

【参考方案1】：

所以 props 对象是组件从 React 接收的内容，具体取决于您如何配置应用程序。如果你有 Redux，那么你会从那里收到一些道具。如果组件是子组件，并且您从父组件传递一些属性，那么您也将从父组件接收道具。如果父母正在传递导航，那么您将在您的孩子中将其作为道具。

props 只是一个组件从多个来源接收的对象。它实际上可以被称为任何东西，banana 或 sporp，只是一个约定叫该对象props。

Destructuring 另一方面用于将对象的属性（或数组中的值）“解包”到单独的变量中。因此，当您解压缩导航属性时，您实际上是从

const MatchToggleComponent = (props) => 
// props object contains navigation and route properties, which can be accessed as props.navigation and props.route

进入

const MatchToggleComponent = ( navigation, route ) => 
    // you unpack navigation and route properties into separate variables `navigation` and `route`, ready to be used in your component.

想象一下 MatchToggleComponent 的父级看起来像

return (
  <>
    <MatchToggleComponent
      foo=bar
      one=two
    />
  </>
)

所以您的props 对象将具有foo 属性、one 属性，然后是navigation 属性和route 属性。有效地解构让您可以选择您感兴趣的属性并“解包”它们，准备好在您的组件中使用，而无需一直引用 props 对象。

所以如果你想使用foo 道具和导航道具，你会这样做

const MatchToggleComponent = ( foo, navigation, route ) => 

您可以在任何组件中执行此操作，只需尝试一下即可。

如果您有任何其他问题，请不要犹豫，继续讨论 :)

编辑 1：

req.query 似乎是一个具有userId 和activeMethods 属性的对象。当你解构对象时，你应该使用花括号。因此，当你解构数组时，你应该使用方括号[]。 您解构的变量名称应与对象中的名称相同。例如：

const foo = 
  some: ...,
  other: ...,
  last: ...,
;

如果你这样做const bar = foo，那么 JS 就不会知道你想要获取对象的第一个 prop，这会抛出一个错误。所以你创建的变量应该与对象中的道具名称相匹配，比如

const  last, other  = foo;

如您所见，顺序并不重要（数组的情况有点不同，但我不会在这里介绍）。

您可以做的是，您可以重命名变量 WHILE 解构对象的属性。想象一下，您想从 foo 对象中获取 last 属性，但出于某种原因您希望将其命名为 first。然后你会做

const  last: first  = foo;

这将为您有效地从 foo 对象中解压缩 last 属性并将其重命名为 first，因此您将能够在您的代码中使用 const first。

【讨论】：

感谢康斯坦丁！关于解构：假设我的 app.get 使用花括号以下列方式解构 2 个变量： var userId, activeMatchIds = req.query;变量名称“userId”和“activeMatchIds”是否必须与 req.query 中的变量名称相同？或者它只是自动从那里获取数字 1 和 2？而且，这里为什么要用大括号呢？

@beyondtdr 添加了信息。

【参考方案2】：

你可以使用 useNavigation 钩子来实现它，它可以访问导航对象。

示例：

import  useNavigation  from '@react-navigation/native';

function MyBackButton() 
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress=() => 
        navigation.goBack();
      
    />
  );

【讨论】：

useNavigation 返回它所在屏幕的导航属性。 App.js 中声明的屏幕不在任何屏幕内；它们本身就是屏幕。