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

Question

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

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

但我相信没有花括号的道具是这样的：

const MatchToggleComponent = (props) => {

那么，如何将子组件的“导航”和“道具”结合起来呢？在花括号里放“道具”对我没用。我认为这方面的一个潜在的用例是，如果您要将来自App.js的道具与导航支柱一起传递下去。

Answer 1

因此，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将不会知道您希望获得对象的第一个支柱，这将引发一个错误。因此，您创建的变量应该与对象中的支柱名称相匹配，如

const { last, other } = foo;

正如您所看到的，顺序并不重要(数组的情况有点不同，但我不会在这里讨论这个问题)。

您可以做的是，您可以重命名变量，同时从对象中破坏属性。假设您想从last对象获得foo道具，但出于某种原因，您希望它名为first。那你就会做

const { last: first } = foo;

这将有效地为您解压last对象中的foo支柱，并将其重命名为第一个，这样您就能够在代码中使用const first。

Answer 2

您可以使用useNavigation钩子来完成这一任务，该钩子允许访问导航对象。

示例：

​

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

function MyBackButton() {
  const navigation = useNavigation();

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

​