时间戳

首页 > 解决方案 > 将“导航”和“道具”传递给子组件

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

问题描述

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

const MatchHistoryScreen = ({ navigation, route }) => {

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

const MatchToggleComponent = (props) => {

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

标签： react-nativecomponentsreact-navigation

解决方案

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

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

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

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 从对象中解构属性。想象一下，您想last从对象中获取道具，但出于某种原因foo您希望它命名。first然后你会做

const { last: first } = foo;

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

推荐阅读